html5標籤video audio

參考文檔：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

視頻或音頻數據是否預加載，若是使用預加載，瀏覽器會預先將視頻或音頻數據進行緩衝。

 preload 值 none、metadata 、auto（默認）

none ：不進行預加載

metadata：只有預加載媒體的元數據（媒體字節數，第一幀，播放列表，持續時間等）

auto：預加載所有視頻或者音頻

原文地址：http://www.cnblogs.com/Jacklovely/p/5642000.html

 

<video id="myVideo" controls preload="auto" width=300 height="165" 
        poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" 
        src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>

<script>

var myVideo = document.getElementById('myVideo');

</script>

事件：

一、事件處理方式

第一種是監聽的方式，addEventListener對事件的發生進行監聽。

第二種是獲取 事件句柄。<video id=」」 src=」」  onplay=」begin()」></video>

二、事件介紹

Video元素與audio元素的相關事件

 

事件	描述
loadstart	瀏覽器開始在網上尋找媒體數據
progress	瀏覽器正在獲取媒體數據
suspend	瀏覽器暫停獲取媒體數據，可是下載過程當中並無正常結束
abort	瀏覽器在下載徹底部媒體數據以前停止獲取媒體數據，可是並非由錯誤引發的
error	獲取媒體數據過程當中出錯
emptied	暫不考慮，能夠網上看
stalled	瀏覽器嘗試獲取媒體數據失敗
play	即將開始播放，當執行了play方法時觸發，或數據下載後元素被設爲autoplay
pause	播放暫停，當執行了pause方法觸發
loadedmetadata	瀏覽器獲取完媒體的時長和字節數
loadeddata	瀏覽器已加載完畢當前播放位置的媒體數據，準備播放
waiting	能夠暫不看
playing	正在播放
canplay	瀏覽器可以播放媒體，但估計以當前播放速率不能直接將媒體播完，播放期間須要緩衝
canplaythrough	瀏覽器可以播放媒體，但估計以當前播放速率能將媒體播完，再也不須要緩衝
seeking	Seeking變爲true，表示瀏覽器正在請求數據
seeked	Seeking屬性變爲false，表面瀏覽器中止請求數據
timeupdate	當前播放位置發生改變，多是播放過程當中的天然改變，也多是人爲改變，或因爲播放不能連續而發生的跳變。
ended	播放結束後中止播放
ratechange	DefaultplaybackRate屬性或playbackRate屬性發生改變
durationchange	播放時長髮生改變
volumechange	volume屬性或muted屬性發生改變

 

第1、獲取影片總時長

要獲取總時長，要用到video的一個事件 loadedmetadata，這個事件的觸發表示元數據（媒體的一些基本信息）已經加載完成，用addEventListener監聽事件，須要注意的是獲取到的總時長單位爲秒

myVideo.addEventListener('loadedmetadata',function(){
    var tol=myVideo.duration //獲取總時長，單位爲s
})

 第2、獲取影片的播放時間和設置播放點

//獲取影片的播放時間，視頻播放時，控制檯不斷輸出 視頻當前時間

myVideo.addEventListener("timeupdate", function(){

　　var currentTime = myVideo.currentTime;//獲取當前播放時間

    console.log(currentTime);//在調試器中打印

})

//設置播放點

若是修改的位置上沒有可用的媒體數據，將拋出INVALID_STATE_ERR異常

myVideo.currentTime = num;

 

三、音量的獲取和設置

音量的範圍值是0~1，通常在UI中都是用百分比，因此須要的時候要進行轉換。

//獲取當前音量
myVideo.addEventListener("volumeChange",function(){
var volume=myvideo.volume //得到當前音量
})
//設置音量
function setVol(num){
　　myVideo.volume=num;
}

 四、屬性

原文地址：http://www.alixixi.com/web/a/2015051294738.shtml

canPlayType方法：使用canPlayType方法來測試瀏覽器是否支持指定的媒體類型。該方法定義以下：var support = myVideo.canPlayType(type);type爲播放文件的MIME類型，能夠加上表示媒體編碼格式的codes參數

返回值：

空字符串：表示瀏覽器不支持此種媒體類型。

maybe：表示瀏覽器可能支持此種媒體類型。

probably：表示瀏覽器肯定支持此種媒體類型。

<video id="video" controls width=640 height=360>
    <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>
<script>
    var myVideo=document.getElementById('video');
    var support = myVideo.canPlayType("video/webm");
    console.log(support); // maybe
    var support = myVideo.canPlayType("video/ogg; codecs=theora, vorbis");
    console.log(support); // probably
</script>

 

 

defaultPlaybackRate屬性：可使用video元素或者audio元素的defaultPlaybackRate屬性讀取或修改媒體默認的播放速率。

playbackRate屬性：可使用video元素或者audio元素的playbackRate屬性讀取或修改媒體當前的播放速率。

muted:使用video元素或audio元素的muted屬性讀取或修改媒體的靜音狀態，該值爲布爾值，true表示處於靜音狀態，false表示處於非靜音狀態。
played：video元素或audio元素的played屬性來返回一個TimeRanges對象，從該對象中能夠讀取媒體文件的已播放部分的時間段。開始時間爲已播放部分的開始時間，結束時間爲已播放部分的結束時間。

paused屬性：使用video元素或audio元素的paused屬性來返回一個布爾值，表示是否處於暫停播放中，true表示媒體暫停播放，false表示媒體正在播放；

ended屬性：使用video元素或audio元素的ended屬性來返回一個布爾值，表示是否播放完畢，true表示媒體播放完畢，false表示媒體尚未播放完畢。

load方法：使用load方法來從新載入媒體進行播放，自動將元素的playbackRate屬性的值變爲defaultPlaybackRate屬性的值，自動將元素的error的值變爲null。

  networkState屬性

      在媒體數據加載過程當中可使用video元素或audio元素的networkState屬性讀取當前網絡狀態，共有4個可能的值；

      1．  NETWORK_EMPTY（數字值爲0）：元素處於初始狀態。

      2．  NETWORK_IDLE(數字值爲1)，瀏覽器已選擇好用什麼編碼格式來播放媒體，可是還沒有創建網絡鏈接。

      3．  NETWORK_LOADING(數字值爲2)：媒體數據加載中

      4．  NETWORK_NO_SOURCE(數字值爲3)，沒有支持的編碼格式，不執行加載。

error屬性：

在正常讀取時候，使用媒體數據的過程當中，video元素或audio元素的error屬性爲null，可是任什麼時候候只要出現錯誤，error屬性將返回一個MediaError對象，該對象的code返回對應的錯誤狀態，共有4個可能值：

1. MEDIA_ERR_ABORTED(數字值爲1)，媒體數據的下載過程因爲用戶的操做緣由而被終止。
2. MEDIA_ERR_NETWORK(數字值爲2)，確認媒體資源可用，可是在下載出現網絡錯誤，媒體數據的下載過程被停止。
3. MEDIA_ERR_DECODE(數字值爲3)，確認媒體資源可用，可是解碼時發生錯誤。
4. MEDIA_ERR_SRC_NOT_SUPPORTED(數字值爲4)，媒體資源不可用或媒體格式不被支持

myVideo.addEventListener('error',function(){

     switch(myVideo.error.code) {
         case 1:
            alert("視頻的下載過程被停止");
         break;
 
         case 2:
            alert("網絡發生故障，視頻的下載過程被停止");
         break;
 
         case 3:
            alert("解碼失敗");
         break;
 
         case 4:
            alert("媒體資源不可用或媒體格式不被支持");
         break;
　　　　　　default:
            alert('發生未知錯誤')
     }

},false)