HTML5新增video标签及对应属性、API详解

杨泽业

知识说明：

       比不上很牛的前端开发人员，但自始至终明白“万丈高楼平地起”，基础最重要，初学HTML5，稳固基础第一步，把最基本的整理下来，留下自己学习的痕迹。HTML5新增的video标签，将其属性以及API使用整理下来，无论以后用不用得到，都是自己的一笔宝贵的财富。

Video标签：

一、video支持视频格式：

以下是三种最常用的格式

1、 ogg格式：带有Theora视频编码（免费）+Vorbis音频编码的Ogg文件（免费）

支持的浏览器：firefox、chrome、opera

2、 MPEG4格式：带有H.264视频编码（收费）+AAC音频编码的MPEG4文件（收费）

支持的浏览器：safari、chrome

3、 Webm格式：带有VP8视频编码（免费）+Vorbis音频编码的WebM格式（免费）

支持的浏览器：IE、firefox、chrome、opera

优势：全免费、压缩比较好（小）、视频质量好

劣势：视频少、转码器几乎没有，不好转码

二、标签原型：

1、//指定一种视频格式，不能播就提示

代码片段：

<video src = “***.mp4” controls=”controls”>

您的浏览器不支持video标签，建议更新浏览器版本

</video>

2、//给定多种视频格式，浏览器根据自身支持程度选择播放哪一种

注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

代码片段：

<video controls = “controls”>

       <source src=”1.mp4” type=”video/mp4” />  //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”

       <source src = “2.ogg” type=”video/ogg” />  //ogg格式

       <source src=”3.webm” type=”video/webm” />   //webm格式

</video>

三、标签属性：

       虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=”属性值”）格式，避免出现错误 （下面红色加粗的属性为常用属性）

属性	值	功能描述
controls	controls	是否显示播放控件
autoplay	autoplay	设置是否打开浏览器后自动播放
width	Pilex（像素）	设置播放器的宽度
height	Pilex（像素）	设置播放器的高度
loop	loop	设置视频是否循环播放（即播放完后继续重新播放）
preload	preload	设置是否等加载完再播放
src	url	设置要播放视频的url地址
poster	imgurl	设置播放器初始默认显示图片
autobuffer	autobuffer	设置为浏览器缓冲方式，不设置autoply才有效

四、video标签API：

       Video标签也提供了比较人性化的API接口，供写JS时直接调用，方便简单

API	事件说明
play	video.play();    播放视频
pause	video.pause();  暂停播放视频
load	video.load();   将全部属性默认值，视频恢复重新开始状态
canPlayType	var support = videoid.canPlayType('video/mp4');   判断浏览器是否支持当前类型的视频格式 返回值： 空字符串：不支持 Maybe：可能支持 Probably：完全支持

       关于video标签的API在JS中用法如下：

<button onclick=”isPlay(this)”>播放</button>

<button onclick=”replay()”>重新播放</button>

<script>

       var video = document.getElementById(‘video’);  //括号内为video标签的id

       //播放视频（点击播放按钮，后变成暂停）

　　 function isPlay(obj)

　　{

      　　 If(video.paused)

　　　　{

     　　　　  Obj.innerHTML=”暂停”;

     　　　　  Video.play();

　　　　}else{

      　　　　 Obj.innerHTML=”播放”;

      　　　　 Video.pause();

　　　　}

　　}

//暂停播放

function replay()

{

       Video.load();

}

//判断要播放的视频格式当前浏览器是否支持

function isPlayType()

{

       Var support = video.canPlayType(“video/mp4”);

       Console.log(support);  //返回结果：空字符串、maybe（可能支持）、probably（支持）

}

</script>

五、video标签API属性：

       Video不仅提供了API接口，还提供了许多的API属性，方便在JS中做判断，如下：

API属性	事件说明
duration	返回媒体的播放总时长，单位秒
loop	是否循环播放
muted	是否静音
paused	是否暂停
currentTime	当前播放时间（单位：秒）
volume	音量值
networkState	返回当前网络状态
playbackRate	播放的倍速(加速、减速播放)
src	当前视频源的URL
ended	返回当前播放是否结束标志
error	返回当前播放的错误状态
initialTime	返回初始播放的位置
mediaGroup	当前音视频所属媒体组 (用来链接多个音视频标签)
played	当前播放部件已经播放的时间范围(TimeRanges对象)
preload	页面加载时是否同时加载音视频
readyState	返回当前的准备状态
seekable	返回当前可跳转部件的时间范围(TimeRanges对象)
audioTracks	返回可用的音轨列表（MultipleTrackList对象）
autoplay	媒体加载后自动播放
buffered	返回缓冲部件的时间范围(TimeRanges对象)
controller	返回当前的媒体控制器（MediaController对象）
controls	显示播控控件
crossOrigin	CORS设置
currentSrc	返回当前媒体的URL
defaultMuted	缺省是否静音
defaultPlaybackRate	播控的缺省倍速
seeking	返回用户是否做了跳转操作
startOffsetTime	返回当前的时间偏移(Date对象)
textTracks	返回可用的文本轨迹(TextTrackList对象)
videoTracks	返回可用的视频轨迹(VideoTrackList对象)