HTML5 video 詳解 屬性 事件 方法

時至今天 2016年12月9日，chrome 的 版本 55.0.2883.75 (64-bit)。瀏覽器自帶的播放器已經足夠強大了，看下圖，現在完全沒必要去自己創建個播放器了。（可以想象html5視頻播放器就是一套theme(皮膚)）

1.0.1. 那么 HTML5 (視頻)- 如何工作 ？

HTML5 中顯示視頻，您所有需要的是：

<video width="320" height="240" controls>
 <source src="/example/video/movie.mp4" type="video/mp4">
 <source src="/example/video/movie.ogg" type="video/ogg">
 您的瀏覽器不支持Video標簽。
</video>

1.0.2. 視頻格式與瀏覽器的支持

如此的話，只需要寫

<source src="/example/video/movie.mp4" type="video/mp4">
<source src="/example/video/movie.ogg" type="video/ogg">

就能支持所有的瀏覽器播放格式

1.0.3. 標簽的屬性

//autoplay 則視頻在就緒后馬上播放。
//controls 用戶顯示控件，比如播放按鈕。
//width 頻播放器的寬度。
//height 設置視頻播放器的高度
//loop 文件完成播放后再次開始播放。
//preload 視頻在頁面加載時進行加載，並預備播放
// src 要播放的視頻的 URL。

let ele = `<div id="videoPlayModal"  data-type='m9' class='fn-hide  '>
  <video id="video1" width="854" height="480" controls  autoPlay preload >
     <source src=${url}  />
           您的瀏覽器不支持Video標簽。
  </video>
</div>`

1.0.4. 使用 DOM 進行控制video

簡單的例子

var myVid=document.getElementById("video1"); //獲取video 元素
myVideo.play(); //播放視頻
myVideo.pause();  //暫停視頻
myVideo.width=560; //設置視頻寬度
myVideo.height=560;  //設置視頻高度

1.0.5. 視頻全屏

chrome

document.getElementById('video1').webkitRequestFullScreen()
document.webkitCancelFullScreen();

Firefox

document.getElementById('video1').mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提議

document.getElementById('video1').requestFullscreen();
document.exitFullscreen();

 

【css偽類】

:fullscreen – 當前全屏化的元素 :fullscreen-ancestor – 所有全屏化元素的祖先元素

1.0.6. HTML5 - 方法、屬性以及事件

var myVid=document.getElementById("video1");
//播放的速度
myVid.playbackRate = 1
myVid.onloadstart = function(){
  console.log(`onloadstart  客戶端開始請求數據  `);
}
myVid.ondurationchange=function(){
  console.log(`durationchange 資源長度改變  `);
}
myVid.onratechange=function(){
  console.log(`onratechange  //播放速率改變  `);
}
myVid.onseeking=function(){
  console.log(` //seeking  尋找中 點擊一個為（緩存）下載的區域`);
}
myVid.onseeked=function(){
  console.log(` //seeked 尋找完畢 `);
}
myVid.onplay=function(){
  console.log(`開始播放時觸發 `);
}
myVid.onwaiting=function(){
  console.log(`播放由於下一幀數據未獲取到導致播放停止，但是播放器沒有主動預期其停止，仍然在努力的獲取數據，簡單的說就是在等待下一幀視頻數據，暫時還無法播放。 `);
}
myVid.onplaying=function(){
  console.log(`真正處於播放的狀態，這個時候我們才是真正的在觀看視頻。 `);
}
myVid.oncanplay=function(){
  console.log(`視頻播放器已經可以開始播放視頻了，但是只是預期可以正常播放，不保證之后的播放不會出現緩沖等待。 `);
}
myVid.onpause=function(){
  console.log(`暫停播放時觸發 `);
}
myVid.onended=function(){
  alert(` //播放結束 loop 的情況下不會觸發  `);
}
myVid.onvolumechange=function(){
  console.log(`音量改變  `);
}
myVid.onloadedmetadata=function(){
  console.log(`獲取視頻meta信息完畢，這個時候播放器已經獲取到了視頻時長和視頻資源的文件大小。 `);
}
myVid.onloadeddata=function(){
  console.log(`"視頻播放器第一次完成了當前播放位置的視頻渲染。"`);
}

myVid.onabort=function(){
  console.log(`客戶端主動終止下載（不是因為錯誤引起）， `);
}

myVid.onerror=function(){
  console.log(`請求數據時遇到錯誤`);
  //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效
  alert(myVid.error.code);
}

//客戶端請求數據
myVid.onprogress=function(){

  console.log(`客戶端正在請求數據 觸發多次，是分段請求的`);
  console.log(myVid.buffered);
   //0.此元素未初始化  1.正常但沒有使用網絡  2.正在下載數據  3.沒有找到資源
  console.log(`networkState ${myVid.networkState}`);
  //  //當前播放的位置，賦值可改變位置 myVid.currentTime = 11 從11秒位置開始播放
  console.log(myVid.currentTime);
  // //返回當前資源的URL
  console.log(myVid.currentSrc);

  console.log(myVid.videoWidth);
  //播放結束 返回true 或 false
  console.log(myVid.ended);
  //音量大小 為0-1 之間的值
  console.log(myVid.volume);


  //當前資源長度
  console.log(myVid.duration);
  console.log(myVid.startDate)
  // myVid.currentTime = 11