html5新标签-音频视频
大家都有在网页中浏览视频的经历，但在Html5之前，对视频乃至音频都还没有一个标准。因此，在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在。
在介绍Html5中的音视频标签前，我们需要了解一些概念。
1 基本概念
1.1 容器
大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip。不管是音频文件或视频文件，实际上都只是一个容器文件。这点类似于压缩了一组文件的ZIP文件。
视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。视频播放的时候，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。
主流的视频文件格式(容器格式)：
| 格式 | 扩展名 |
|---|---|
| MPEG-4 | .mp4 |
| Flash视频 | .flv |
| Ogg | .ogv |
| WebM | .webm |
主流的音频文件格式：
| 格式 | 扩展名 |
|---|---|
| MPEG-3 | .mp3 |
| Acc音频 | .acc |
| Ogg音频 | .ogg |
音频视频交错: 通常以.avi为扩展名
1.2 编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便
音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。
| 视频编解码器 | 音频编解码器 |
|---|---|
| H.264 | AAC |
| VP8 | MPEG-3 |
| Ogg Theora | Ogg Vorbis |
H.264： 别名 MPEG-4的第十部分,由MPEG研发并于2003年标准化。它的目的支持一切设备，无论是低带宽低cpu，还是高带宽高cpu 或者是两者之间。 要做到这一点，H.264标准被分成不同的几种配置。高配置使用了更多特性， 这会导致在解码过程中更加消耗CPU，但视频文件本身会更小，视频效果也更好 。
| 设备 | 配置 |
|---|---|
| 苹果iphone手机 | 基本配置(BaseLine) |
| 正常的电视机支持 | 基本配置(BaseLine) 和 主配置(Main)两种 |
| 正常的电脑支持 | 基本配置(BaseLine) 和 主配置(Main) 高级配置(high)三种 |
当然有一些编解码器受专利的保护，有一些则是免费的，例如Ogg的Vorbis音频编解码器。Ogg的Theora视频编解码器也是可以免费使用的。而想使用H.264的话就需要支付相关的费用了。
现在的视频编解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，它们不会存储每一帧的所有信息，而只是存储两帧之间的差异信息。编码器也分有损和无损，无损视频文件一般太大，在网页中没有优势，所以我们重点研究有损编解码器。有损编解码器中，信息在编码过程中丢失是无法避免的，反复的对视频编码会导致其画面不均匀。
1.3 浏览器对于容器和编解码器支持的情况
| Browser | MP4(H.264 + AAC) | WebM(VP8 + Vorbis ) | Ogg(Theora + Vorbis) |
|---|---|---|---|
| Internet Explorer 9 | YES | NO | NO |
| Firefox 4.0 | NO | YES | YES |
| Google Chrome | YES | YES | YES |
| Apple Safari 5 | YES | NO | NO |
| Opera 10.6 | NO | YES | YES |
更多内容可以参见：http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/。
【注意】：目前还没有一种编解码和容器的组合能应用于所有的浏览器中。
1.4 处理视频的一个流程
- 制作一个Ogg容器中使用Theora视频和Vorbis音频的版本
- 制作另外一个版本，使用WebM视频容器（VP8 + Vorbis）
- 再制作一个版本，使用MP4视频容器，并使用H.264基本配置的视频和ACC低配的音频
- 链接上面3个文件到同一个video元素，并向后兼容基于Flash的视频播放器
1.5 格式转化
| 工具 | 转化 |
|---|---|
| 用 FFmpeg 制作MP4 视频 | ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4 |
| 用 FFmpeg 制作 WebM 视频 | ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm |
| FFmpeg 制作 Ogg 视频 | ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv |
| FFmpeg 制作Mp3音频 | ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3 |
| FFmpeg 制作Ogg音频 | ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg |
| FFmpeg 制作ACC音频 | ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac |
2 html5标签
2.1 <video>
Html5提供的播放视频的标签
- src:资源地址
- controls:该属性定义是显示还是隐藏用户控制界面
2.2 <audio>
Html5提供的播放音频的标签
- src:资源地址
- controls:该属性定义是显示还是隐藏用户控制界面
2.3 <source>
2.3.1 视频：
type='video/webm; codecs="vp8, vorbis"'
type='video/ogg; codecs="theora, vorbis"'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
2.3.2 音频：
type='audio/ogg; codecs="vorbis"'
type='audio/aac; codecs="aac"'
type='audio/mpeg'
3 video标签的属性
- width :视频显示区域的宽度，单位是CSS像素
- height :视频展示区域的高度，单位是CSS像素
- poster :一个海报帧的URL，用于在用户播放或者跳帧之前展示
- src : 要嵌到页面的视频的URL
- controls : 显示或隐藏用户控制界面
- autoplay : 媒体是否自动播放
- loop : 媒体是否循环播放
- muted : 是否静音
- preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
- none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量； 换句话说就是提示浏览器该视频不需要缓存。
- metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
- auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
- 空字符串：也就代指 auto 值。
4 audio标签的属性
- src
- controls
- autoplay
- loop
- muted
- preload
5 音视频js相关属性
5.1 音视频共有部分：
| 属性 | 说明 |
|---|---|
| duration | 媒体总时间(只读) |
| currentTime | 开始播放到现在所用的时间(可读写) |
| muted | 是否静音(可读写,相比于volume优先级要高) |
| volume | 0.0-1.0的音量相对值(可读写) |
| paused | 媒体是否暂停(只读) |
| ended | 媒体是否播放完毕(只读) |
| error | 媒体发生错误的时候，返回错误代码 (只读) |
| currentSrc | 以字符串的形式返回媒体地址(只读) |
5.2 视频多的部分:
| 属性 | 说明 |
|---|---|
| poster | 视频播放前的预览图片(读写) |
| width、height | 设置视频的尺寸(读写) |
| videoWidth、 videoHeight | 视频的实际尺寸(只读) |
6 音视频js相关函数
| 函数 | 说明 |
|---|---|
| play() | 媒体播放 |
| pause() | 媒体暂停 |
| load() | 重新加载媒体 |
7 js相关事件
7.1 视频:
| 事件 | 说明 |
|---|---|
| abort | 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。 |
| canplay | 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。 |
| canplaythrough | 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。 |
| durationchange | 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。 |
| emptied | 媒体被清空（初始化）时触发。 |
| ended | 播放结束时触发。 |
| error | 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。 |
| loadeddata | 媒体的第一帧已经加载完毕。 |
| loadedmetadata | 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。 |
| loadstart | 在媒体开始加载时触发。 |
| mozaudioavailable | 当音频数据缓存并交给音频层处理时 |
| pause | 播放暂停时触发。 |
| play | 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。 |
| playing | 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。 |
| progress | 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。 |
| ratechange | 在回放速率变化时触发。 |
| seeked | 在跳跃操作完成时触发。 |
| seeking | 在跳跃操作开始时触发。 |
| stalled | 在尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。 |
| timeupdate | 元素的currentTime属性表示的时间已经改变。 |
| volumechange | 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）。 |
| waiting | 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发 |
7.2 音频:
| 事件 | 说明 |
|---|---|
| abort | 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。 |
| canplay | 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。 |
| canplaythrough | 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。 |
| durationchange | 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。 |
| emptied | 媒体被清空（初始化）时触发。 |
| ended | 播放结束时触发。 |
| error | 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。 |
| loadeddata | 媒体的第一帧已经加载完毕。 |
| loadedmetadata | 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。 |
| loadstart | 在媒体开始加载时触发。 |
| mozaudioavailable | 当音频数据缓存并交给音频层处理时 |
| pause | 播放暂停时触发。 |
| play | 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。 |
| playing | 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。 |
| progress | 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。 |
| ratechange | 在回放速率变化时触发。 |
| seeked | 在跳跃操作完成时触发。 |
| seeking | 在跳跃操作开始时触发。 |
| stalled | 在尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。 |
| timeupdate | 元素的currentTime属性表示的时间已经改变。 |
| volumechange | 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）。 |
| waiting | 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发 |
8 实例代码
8.1 class操作函数
function addClass(node,className){var reg=new RegExp("\\b"+className+"\\b");if(!reg.test(node.className)){node.className +=(" "+className); }
}
function removeClass(node,className){if(node.className){var reg=new RegExp("\\b"+className+"\\b");var classes = node.className;node.className=classes.replace(reg,"");if(/^\s*$/g.test(node.className)){node.removeAttribute("class");}}else{node.removeAttribute("class");}
}
8.2 全屏实现
full.onclick=function() {if(isFullScreen) {isFullScreen = falseif (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }else if (document.msExitFullscreen) {document.msExitFullscreen();}} else {isFullScreen = truevar docElm = document.documentElement;//W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); }//FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }//Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }//IE11else if (docElm.msRequestFullscreen) {docElm.msRequestFullscreen();}}
}
8.3 video写法
<video width="800" height=""><source src="myvideo.mp4" type="video/mp4"></source><source src="myvideo.ogv" type="video/ogg"></source><source src="myvideo.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&file=myvideo.swf" /></object>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
8.4 功能点逻辑
- 播放按钮点击时：
- 切换播放按钮的样式
- 控制视频的播放暂停
- 播放:控制进度条的前进(通过开启定时器来实现)
- 暂停:要关闭定时器不让进度条前进
- 停止按钮点击时：
- 切换播放按钮的样式
- 控制视频暂停
- 暂停：要关闭定时器不让进度条前进
- 进度条重置为0
- 视频时间调整为0
- 拖拽时：根据拖拽距离控制视频时间
- 点击进度条时：
- 根据点击位置控制视频时间
- 默认就应该是播放操作
- 切换播放按钮的样式
- 控制视频的播放
- 控制进度条的前进：通过开启定时器来实现
html5新标签-音频视频相关推荐
- HTML5 ＜VIDEO＞标签 音频视频 进度条无法正常使用问题
@HTML5 <VIDEO>标签 音频视频 进度条无法正常使用问题 html <video id='previewVideo' autoplay controls="con ...
- html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许 没有 ...
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？...
新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(a ...
- 【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
- HTML5新标签及特性
HTML5 html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 1.新特性 新增语义化元素 新增表单相 ...
- HTML表单标签和HTML5新标签
[HTML表单标签和HTML5新标签] 目录 [HTML表单标签和HTML5新标签] 1. HTML表单标签 1.1input 控件 1.2.label标签 1.3.textarea控件 1.4.下拉 ...
- HTML5新标签与特性（笔记）
HTML5新标签与特性 前言 新增语义化标签 新增标签属性 新增的input的type属性值 多媒体标签 embed audio video 字体图标 前言 HTML5 : HTML 标准的最新版 ...
- c 嵌入html5 win7,Html5新标签解释及用法
2011-01-28 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的 ...
- html5变动标签新写法,Html5新标签解释及用法
Html5新标签解释及用法 发布时间:2012-02-17 22:50:45 作者:佚名 我要评论 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1. ...
最新文章
- java 逻辑校验工具_SpringBoot2.0实战（10）整合fluent-validator优雅业务校验
- 你见过最差的算法工程师都有哪些表现？
- 零距离感受2015年安全***大赛：静动之美 ***兼备
- Generator函数的语法以及异步的应用
- Lambda演算学习笔记
- python request url 转义_Python多线程抓取Google搜索链接网页
- flask mysql分页,Flask分页的实现方法
- 泛型型协变逆变_Java泛型类型简介：协变和逆变
- C++ 高级篇（五）—— 预处理指令
- STM32项目（六）—— 中文电子捡货标签
- 68 SD配置-发票凭证配置-定义出具发票类型
- JavaScript 自定义对象 及 new()原理与实现 如何完整地手写实现new
- 我的梦想是成为一名计算机程序员英语怎么说,我梦想将来成为一名程序员英语作文...
- 如何将Caj转Word，免费CAJ转换的方法
- css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
- 商战传奇：周鸿祎死磕雷军的背后的三重玄机
- 心形源码HTML,纯CSS实现心形加载动画（附源码）
- 算法设计7-数字迷问题
- 水果分割论文、代码和数据集汇总
- 服务器在新加坡延迟,从国内访问新加坡服务器延迟多大？