HTML5之video元素

時間 2019-11-13

標籤 html5 html video 元素欄目 HTML5 简体版

原文原文鏈接

1、video元素支持的視頻格式

HTML5中的video標籤支持3種經常使用的視頻格式：

一、Ogg = 帶有Theora 視頻編碼和Vorbis 音頻編碼的 Ogg 文件；

二、MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件；

三、WebM = 帶有VP8 視頻編碼和Vorbis 音頻編碼的WebM 文件。

瀏覽器支持程度：safari3+，firefox4+，Opera10+，chrome3+，IE9+等。

其餘不支持視頻格式能夠下載轉換工具進行轉換。 http://www.html5videoplayer.net/

2、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

3、子元素source

因爲不一樣瀏覽器支持播放視頻格式不一樣，能夠用video的子元素source制定多個元素，瀏覽器會依次往下查找到能夠播放的視頻源。

</video>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。