HTML5之video元素

一、video元素支持的视频格式

HTML5中的video标签支持3种常用的视频格式：

1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；

2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；

3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。

浏览器支持程度：safari3+，firefox4+，Opera10+，chrome3+，IE9+等。

其他不支持视频格式可以下载转换工具进行转换。http://www.html5videoplayer.net/

二、Video的属性及事件

src ：视频的属性

poster：视频封面，没有播放时显示的图片

preload：预加载

autoplay：自动播放

loop：循环播放

controls：浏览器自带的控制条

width：视频宽度

height：视频高度

error属性：在正常读取时候，使用媒体数据的过程中，video元素或audio元素的error属性为null，但是任何时候只要出现错误，error属性将返回一个MediaError对象，该对象的code返回对应的错误状态，共有4个可能值：

MEDIA_ERR_ABORTED(数字值为1)，媒体数据的下载过程由于用户的操作原因而被终止。

MEDIA_ERR_NETWORK(数字值为2)，确认媒体资源可用，但是在下载出现网络错误，媒体数据的下载过程被中止。

MEDIA_ERR_DECODE(数字值为3)，确认媒体资源可用，但是解码时发生错误。

MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4)，媒体资源不可用或媒体格式不被支持。

代码如下：

var video = document.getElementById("videoElement");

video.addEventListener("error",function(){

var error = video.error;

swicth(error.code) {

case 1:

alert("视频的下载过程被中止");

break;

case 2:

alert("网络发生故障，视频的下载过程被中止");

break;

case 3:

alert("解码失败");

break;

case 4:

alert("媒体资源不可用或媒体格式不被支持");

break;

}

},false);

networkState属性

在媒体数据加载过程中可以使用video元素或audio元素的networkState属性读取当前网络状态，共有4个可能的值；

1． NETWORK_EMPTY（数字值为0）：元素处于初始状态。

2． NETWORK_IDLE(数字值为1)，浏览器已选择好用什么编码格式来播放媒体，但是尚未建立网络连接。

3． NETWORK_LOADING(数字值为2)：媒体数据加载中

4． NETWORK_NO_SOURCE(数字值为3)，没有支持的编码格式，不执行加载。

currentTime属性与duration属性

video元素或audio元素的currentTime属性来读取媒体的当前播放位置(单位是s)，也可以通过修改currentTime属性来修改当前播放位置，如果修改的位置上没有可用的媒体数据时，将抛出INVALID_STATE_ERR异常；

video元素或audio元素的duration属性来读取媒体文件总的播放时间。

我们可以来做demo如下：

HTML代码如下：

<p>Video is not visible, most likely your browser does not support HTML5 video</p>

</video>

<button onclick="getCurTime()" type="button">获得当前时间的位置</button>

<button onclick="setCurTime()" type="button">把时间位置设置为 5 秒</button>

<button onclick="duration()" type="button">读取媒体文件总的播放时间</button>

JS代码如下：

var myVid=document.getElementById("video");

function getCurTime(){

// 获得当前视频或者音频时间的位置

alert(myVid.currentTime);

}

function setCurTime(){

// 给当前的视频或者音频设置5s时间的位置

myVid.currentTime=5;

}

function duration() {

//读取媒体文件总的播放时间单位为S

alert(myVid.duration);

}

具体参考：http://www.w3.org/2010/05/video/mediaevents.html

三、子元素source

由于不同浏览器支持播放视频格式不同，可以用video的子元素source制定多个元素，浏览器会依次往下查找到可以播放的视频源。

</video>

来自为知笔记(Wiz)

秒客网

HTML5之video元素

相关文章