使用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图片边框border-image的用法
Jun 30 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
Html5定位终极解决方案
Feb 05 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
深入了解php4(2)--重访过去
2006/10/09 PHP
PHP之数组学习
2011/05/29 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
详解Python中find()方法的使用
2015/05/18 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
pycharm安装及如何导入numpy
2020/04/03 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
Linux文件系统类型
2012/09/16 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
机械设计及其自动化专业推荐信
2013/10/31 职场文书
毕业生的自我评价
2013/12/30 职场文书
开学典礼决心书
2014/03/11 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
JavaScript的Set数据结构详解
2022/02/18 Javascript
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫