首頁 > html教程 > HTML熱點 閱讀:0更新時間:2020-12-20 09:50:26

HTML5 video 詳解 屬性 事件 方法

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

chrome 瀏覽器.png

safari 瀏覽器

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. 視頻格式與瀏覽器的支持

瀏覽器的支持 .png

如此的話,只需要寫

<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.οnprοgress=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

轉載于:https://www.cnblogs.com/passkey/p/10640569.html

beylze編程學院,一個分享編程知識和seo優化知識的網站。跟著beylze一起學習,每天都有進步。

通俗易懂,深入淺出,一篇文章只講一個知識點。

文章不深奧,不需要鉆研,在公交、在地鐵、在廁所都可以閱讀,隨時隨地漲姿勢。

文章不涉及代碼,不燒腦細胞,人人都可以學習。

當你決定關注beylze(公眾號:beylze),你已然超越了90%的其他從業者!

相關文章

優秀教程

国产亚洲欧美日韩