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)，媒体资源不可用或媒体格式不被支持。

代码如下：

<video src="" id="videoElement"></video>

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代码如下：

<video id="video" controls width=640 height=360 autoplay>

    <source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>

    <source src="Wildlife/Wildlife.webm" type="video/webm" >

    <source src="Wildlife/Wildlife.mp4" type="video/mp4">

    <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 width=”320″ height=”240″>

 

<source src=”trailer.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />

 

<source src=”trailer.mp4″ type=’video/mp4; codecs=”avc1.4D401E, mp4a.40.2″‘ />

 

<source src=“trailer.ogg” type=’video/ogg; codecs=”theora, vorbis”‘ />

 

</video>

来自为知笔记(Wiz)