一、概述
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 |