video 屬性和事件用法大全

一、video 屬性

<!-- video 不支持 IE8及如下版本瀏覽器，支持三種視頻格式：MP4，WebM 和 Ogg -->
  <video src="test.mp4" controls width="400" height="300"></video>

  <!-- 禁止下載 -->
  <video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video>

  <!-- 禁止下載，禁止全屏 -->
  <video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video>

  <!-- 自動播放 （不一樣瀏覽器的表現不同） -->
  <video src="test.mp4" controls autoplay width="400" height="300"></video>

  <!-- 默認靜音播放（可手動點開繼續播放） -->
  <video src="test.mp4" controls muted width="400" height="300"></video>

  <!-- 循環播放 -->
  <video src="test.mp4" controls loop width="400" height="300"></video>

  <!-- 預加載 -->
  <video src="test.mp4" controls preload width="400" height="300"></video>

  <!-- 貼圖 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video>

  <!-- 音量控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
  <script>
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值範圍：0 到 1，0 是靜音，0.5 是一半的音量，1 是最大音量（默認值）
  </script>

  <!-- 播放時間控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video>
  <script>
    var video = document.getElementById('_time')
    console.log(video.currentTime)  // 視頻當前正在播放的時間（單位：s），進度條拖到哪就顯示當前的時間
    video.currentTime = 60  // 默認從60秒處開始播放
  </script>

  <!-- 播放地址切換 （常見於切換超清  高清 流暢，不一樣畫質的視頻地址不一樣） -->
  <video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video>
  <script>
    var video = document.getElementById('_src')
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   絕對地址，DOM 中是相對地址
    // video.src = 'test-2.mp4'   // 直接替換掉了原來的視頻src
    setTimeout(() => {
      video.src = 'test-2.mp4'  // 播放到第 30s 的時候，自動切換視頻
    }, 30000)
  </script>

  <!-- 備用地址切換 -->
  <video controls autoplay width="400" height="300" id="_source">
    <source src="test3.mp4" type="video/mp4" />
    <source src="test9.mp4" type="video/mp4" />
    <source src="test-2.mp4" type="video/mp4" />
  </video>
  <script>
    var video = document.getElementById('_source')
    setTimeout(() => {
      console.log(video.currentSrc)     // http://127.0.0.1:8001/test.mp4
    }, 1000)

    // HTTP 載入失敗，狀態碼 404。媒體資源 http://127.0.0.1:8001/test3.mp4 載入失敗。
    // HTTP 載入失敗，狀態碼 404。媒體資源 http://127.0.0.1:8001/test9.mp4 載入失敗。
    // http://127.0.0.1:8001/test-2.mp4
    // 當第一段視頻加載失敗時，自動加載下一段視頻

 

二、video 事件

<video src="test.mp4" controls width="400" height="300" id="video"></video>
  
  <script>
    var video = document.getElementById('video')

    // 一、loadstart：視頻查找。當瀏覽器開始尋找指定的音頻/視頻時觸發，也就是當加載過程開始時
    video.addEventListener('loadstart', function(e) {
      console.log('提示視頻的元數據已加載')
      console.log(e)
      console.log(video.duration)            // NaN
    })

    // 二、durationchange：時長變化。當指定的音頻/視頻的時長數據發生變化時觸發，加載後，時長由 NaN 變爲音頻/視頻的實際時長
    video.addEventListener('durationchange', function(e) {
      console.log('提示視頻的時長已改變')
      console.log(e)
      console.log(video.duration)           // 528.981333   視頻的實際時長（單位：秒）
    })

    // 三、loadedmetadata ：元數據加載。當指定的音頻/視頻的元數據已加載時觸發，元數據包括：時長、尺寸（僅視頻）以及文本軌道
    video.addEventListener('loadedmetadata', function(e) {
      console.log('提示視頻的元數據已加載')
      console.log(e)
    })

    // 四、loadeddata：視頻下載監聽。噹噹前幀的數據已加載，但沒有足夠的數據來播放指定音頻/視頻的下一幀時觸發
    video.addEventListener('loadeddata', function(e) {
      console.log('提示當前幀的數據是可用的')
      console.log(e)
    })

    // 五、progress：瀏覽器下載監聽。當瀏覽器正在下載指定的音頻/視頻時觸發
    video.addEventListener('progress', function(e) {
      console.log('提示視頻正在下載中')
      console.log(e)
    })

    // 六、canplay：可播放監聽。當瀏覽器可以開始播放指定的音頻/視頻時觸發
    video.addEventListener('canplay', function(e) {
      console.log('提示該視頻已準備好開始播放')
      console.log(e)
    })

    // 七、canplaythrough：可流暢播放。當瀏覽器預計可以在不停下來進行緩衝的狀況下持續播放指定的音頻/視頻時觸發
    video.addEventListener('canplaythrough', function(e) {
      console.log('提示視頻可以不停頓地一直播放')
      console.log(e)
    })

    // 八、play：播放監聽
    video.addEventListener('play', function(e) {
      console.log('提示該視頻正在播放中')
      console.log(e)
    })

    // 九、pause：暫停監聽
    video.addEventListener('pause', function(e) {
      console.log('暫停播放')
      console.log(e)
    })

    // 十、seeking：查找開始。當用戶開始移動/跳躍到音頻/視頻中新的位置時觸發
    video.addEventListener('seeking', function(e) {
      console.log('開始移動進度條')
      console.log(e)
    })

    // 十一、seeked：查找結束。當用戶已經移動/跳躍到視頻中新的位置時觸發
    video.addEventListener('seeked', function(e) {
      console.log('進度條已經移動到了新的位置')
      console.log(e)
    })

    // 十二、waiting：視頻加載等待。當視頻因爲須要緩衝下一幀而中止，等待時觸發
    video.addEventListener('waiting', function(e) {
      console.log('視頻加載等待')
      console.log(e)
    })

    // 1三、playing：當視頻在已因緩衝而暫停或中止後已就緒時觸發
    video.addEventListener('playing', function(e) {
      console.log('playing')
      console.log(e)
    })

    // 1四、timeupdate：目前的播放位置已更改時，播放時間更新
    video.addEventListener('timeupdate', function(e) {
      console.log('timeupdate')
      console.log(e)
    })

    // 1五、ended：播放結束
    video.addEventListener('ended', function(e) {
      console.log('視頻播放完了')
      console.log(e)
    })

    // 1六、error：播放錯誤
    video.addEventListener('error', function(e) {
      console.log('視頻出錯了')
      console.log(e)
    })

    // 1七、volumechange：當音量更改時
    video.addEventListener('volumechange', function(e) {
      console.log('volumechange')
      console.log(e)
    })

    // 1八、stalled：當瀏覽器嘗試獲取媒體數據，但數據不可用時
    video.addEventListener('stalled', function(e) {
      console.log('stalled')
      console.log(e)
    })

    // 1九、ratechange：當視頻的播放速度已更改時
    video.addEventListener('ratechange', function(e) {
      console.log('ratechange')
      console.log(e)
    })
  </script>