使用HTML5在网页中嵌入音频和视频播放的基本方法


Posted in HTML / CSS onFebruary 22, 2016

HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

嵌入视频
下面是在 Web 页面中嵌入视频文件最简单的形式:

XML/HTML Code复制内容到剪贴板
  1. <video src="foo.mp4"  width="300" height="200" controls>  
  2.     Your browser does not support the <video> element.      
  3. </video>  

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。
我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <video  width="300" height="200" controls autoplay>  
  5.        <source src="/html5/foo.ogg" type="video/ogg" />  
  6.        <source src="/html5/foo.mp4" type="video/mp4" />  
  7.        Your browser does not support the <video> element.   
  8.    </video>  
  9. </body>  
  10. </html>  

Video 属性规范
HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:

属性 描述
autoplay 如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。
controls 如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。
height 这个属性以 CSS 像素的形式指定视频显示区域的高度。
loop 如果指定这个布尔值属性,表示允许播放结束后自动回放。
preload 指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。
poster 这是一个图像 URL,显示到用户播放或快进。
src 要嵌入的视频 URL。可选,可以在 video 块中使用 元素替代来指定要嵌入的视频。
width 这个属性以 CSS 像素的形式指定视频显示区域的宽度。

嵌入音频
HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。
XML/HTML Code复制内容到剪贴板
  1. <audio src="foo.wav" controls autoplay>  
  2.     Your browser does not support the <audio> element.      
  3. </audio>  

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <audio controls autoplay>  
  5.        <source src="/html5/audio.ogg" type="audio/ogg" />  
  6.        <source src="/html5/audio.wav" type="audio/wav" />  
  7.        Your browser does not support the <audio> element.   
  8.    </audio>  
  9. </body>  
  10. </html>  

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

属性 描述
autoplay 如果指定这个布尔值属性,只要没停止加载数据,音频就会立刻自动开始播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,音频也会自动开始缓冲。
controls 如果指定这个属性,表示允许用户控制音频播放,包括音量控制,快进以及暂停/恢复播放。
loop 如果指定这个布尔值属性,表示允许音频播放结束后自动回放。
preload 这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。
src 要嵌入的音频 URL。可选,可以在音频块里面使用 元素指定要嵌入的音频来替代。

处理媒体事件
HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:
事件 描述
abort 播放中止时生成这个事件。
canplay 足够的数据可用并且媒体可以播放时生成这个事件。
ended 播放完成时生成这个事件。
error 发生错误时生成这个事件。
loadeddata 媒体第一帧载入完成时生成这个事件。
loadstart 开始加载媒体时生成这个事件。
pause 播放暂停时生成这个事件。
play 播放开始或者恢复时生成这个事件。
progress 定期通知媒体下载进度时生成这个事件。
ratechange 播放速度改变时生成这个事件。
seeked 快进操作完成时生成这个事件。
seeking 快进操作开始时生成这个事件。
suspend 媒体加载被暂停时生成这个事件。
volumechange 音频音量变化时生成这个事件。
waiting 请求操作(比如播放)被延迟,等待另一个操作完成(比如快进)时生成这个事件。

下面是一个允许播放给定视频的示例:
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function PlayVideo(){   
  5.    var v = document.getElementsByTagName("video")[0];     
  6.    v.play();    
  7. }   
  8. </script>  
  9. </head>  
  10. <html>  
  11. <body>  
  12.    <form>  
  13.    <video  width="300" height="200" src="/html5/foo.mp4">  
  14.        Your browser does not support the <video> element.   
  15.    </video>  
  16.    <input type="button" onclick="PlayVideo();"  value="Play"/>  
  17.    </form>  
  18. </body>  
  19. </html>  

配置服务器媒体类型
大多数服务器默认都没使用正确的 MIME 类型提供 Ogg 或 mp4 媒体,因此我们可能需要添加适当的配置。

复制代码
代码如下:
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
HTML / CSS 相关文章推荐
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 #HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 #HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 #HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 #HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 #HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 #HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 #HTML / CSS
You might like
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP答题类应用接口实例
2015/02/09 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
js压缩利器
2007/02/20 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
ant design实现圈选功能
2019/12/17 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pyqt5简介及安装方法介绍
2018/01/31 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
小学生检讨书大全
2014/02/06 职场文书
房屋授权委托书范本
2014/10/07 职场文书
三年级学生期末评语
2014/12/26 职场文书
经理岗位职责范本
2015/04/15 职场文书
公司捐书倡议书
2015/04/27 职场文书
2016年情人节广告语
2016/01/28 职场文书
开网店计划分析
2019/07/30 职场文书