首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

使用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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 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
德生G88(1) 爱尔兰购物网站(30) 英国购物网站(954) 纸巾盒(1) 美国购物网站(1542) CPU(2) 香港购物网站(84) 天梯图(1) AE3805(1) SLi Minor 2020(63)
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
家乐福台湾线上购物网：Carrefour台湾
2020/09/15 全球购物
Agoda中文官网：安可达（低价预订全球酒店）
2021/01/18 全球购物
年终自我鉴定
2013/10/09 职场文书
大学生党课思想汇报
2013/12/29 职场文书
林肯就职演讲稿
2014/05/19 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
售票员岗位职责
2015/02/15 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书