一、概述
HTML5增加了audio和video两个元素,开发人员不必使用插件就能播放音频和视频了。
audio元素和video元素有两个关键概念:容器(container)和编解码器(codec)
1、视频容器
主流食品容器支持的视频格式:
Audio Video Interleave(.avi)、Flash Video(.flv)、MPEG4(.mp4)、Matroska(.mkv)、Ogg(.ogv)
2、音频视频编解码器
一些音频编解码器:
ACC、MPEG-3、Ogg Vorbis
一些视频编解码器:
H.264、VP8、Ogg Theora
?
WebM:google发布的视频格式,清晰且免费。视频使用VP8编码,音频使用Ogg Vorbis编码。
?
3、HTML5音视频的限制
暂时没有对流视频的支持和规范。
资源受跨域共享的限制。
全频视频无法通过脚本控制。浏览器提供控制方法。
?
4、浏览器的支持
不同浏览器对容器和编解码的支持是不同的。可以查看http://www.longtailvideo.com/html5/formats/
?
二、使用
1、检测浏览器是否支持:
//通过!!运算符将结果转换成布尔值
var hasVieo = !!(document.createElement('video').canPlayType);
?
<video src="video.webm" controls>
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="vodeo.swf" />
    </object>
    Your browser does not support HTML5 video.
</video>
2、字幕
使用WebVTT标准。相见:http://dev.w3.org/html5/webvtt/
<video src="video.ogg" controls>
    <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt">
    <track label="Dutch" kind="subtitles" srclang="nl" src="subtitles_nl.vtt">
    Your browser does not support HTML5 video.
</video>
?
3、多个源
为了应对不同浏览器对媒体的支持不同,可以设置多个类型的源文件。
浏览器会按照声明的顺序判断,如果支持的不止一种,浏览器会选择支持的第一个来源。
<audio controls>
    <source src="johann_sebastian_bach_air.ogg">
    <source src="johann_sebastian_bach_air.mp3">
    An audio clip from Johann Sebastian Bach.
</audio>
?
4、媒体的控制
常用控制函数
| 函数 | 动作 | 
| load() | 
 加载音频/视频文件,为播放做准备。通常情况下不必调用, 除非是动态生成的元素。用来播放前预加载。  | 
| play() | 
 加载(有必要的话)并播放音频/视频文件。除非音频/视频 已经暂停在其他位置了,否则默认从开头播放  | 
| pause() | 暂停处于播放状态的音频/视频文件 | 
| canPlayType(type) | 测试video元素是否支持给定MIME类型的文件 | 
?
只读的媒体特性
| 只读特性 | 值 | 
| duration | 整个媒体文件的播放时长,以s为单位。如果无法获取时长,则返回NaN | 
| paused | 如果媒体文件当前被暂停,则返回true。如果还未开始播放,默认返回true | 
| ended | 如果媒体文件已经播放完毕,则返回true | 
| startTime | 
 返回最早的播放其实时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分 内容已经不在缓冲区  | 
| error | 在发生了错误的情况下返回的错误代码 | 
| currentSrc | 
 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中 选择的文件  | 
?
可用脚本控制的特性值
| 特性 | 值 | 
| autoplay | 将媒体文件设置为创建后自动播放,或者查询是否已设置为autoplay | 
| loop | 返回是否循环播放,或设置循环播放(或者不循环播放) | 
| currentTime | 
 以秒为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来 进行搜索,并定位到媒体文件的特定位置  | 
| controls | 显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见 | 
| volume | 在0.0到1.0之间设置音频音量的相对值,或者产寻当前音量相对值 | 
| muted | 为音频文件设置静音或者消除静音,或者检测当前是否为静音 | 
| autobuffer | 
 通知播放器在媒体文件开始播放前,是否惊醒缓冲加载。如果已设置为autoplay,则 忽略此特性  | 
?
video元素的额外特性
| 特性 | 值 | 
| poster | 在视频加载完成之前,代表视频内容的图片的URL地址。该特性可读可修改 | 
| width、height | 
