HTML5——HTML5多媒体标签

简介: HTML5——HTML5多媒体标签

多媒体标签


  • embed:标签定义嵌入的内容


  • audio:播放音频


  • video:播放视频


多媒体 embed(会使用)


embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。


因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体。


<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>


优酷,土豆,爱奇艺,腾讯、乐视等等


  1. 先上传


  1. 在分享


多媒体 audio


HTML5通过标签来解决音频播放的问题。


使用相当简单,如下图所示



并且可以通过附加属性可以更友好控制音频的播放,如:


autoplay 自动播放


controls 是否显不默认播放控件


loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环


由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考



多浏览器支持的方案,如下图


标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择



多媒体 video


HTML5通过标签来解决音频播放的问题。


同音频播放一样,使用也相当简单,如下图



同样,通过附加属性可以更友好的控制视频的播放


autoplay 自动播放


controls 是否显示默认播放控件


loop 循环播放


width 设置播放窗口宽度


height 设置播放窗口的高度


由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考



多浏览器支持的方案,如下图****



案例


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <audio  controls loop>
    <source src="bgsound.mp3"/>
    <source src="music.ogg"/>
    您的浏览器版本太低
  </audio>
  <video autoplay  controls>
    <source  src="movie04.ogg"/>
    <source  src="mp4.mp4"/>
  </video>
</body>
</html>
相关文章
|
Web App开发 移动开发 UED
介绍一下HTML5的新技能:多媒体支持
介绍一下HTML5的新技能:多媒体支持
463 2
|
11月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
490 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
11月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
304 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
404 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
341 5
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
存储 移动开发 前端开发
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
483 0
|
前端开发
HTML基本标签使用详解
HTML基本标签使用详解
194 0
|
数据采集 前端开发 JavaScript
【 ⑤】HTML概述与基本标签详解
【 ⑤】HTML概述与基本标签详解
255 0

热门文章

最新文章