HTML5之video元素

时间:2022-02-18 09:18:28
一、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);
}

三、子元素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>