1.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
    // 當第一段視訊載入失敗時，自動載入下一段視訊

2.video的方法

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

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

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

    // 3、loadedmetadata ：元資料載入。當指定的音訊/視訊的元資料已載入時觸發，元資料包括：時長、尺寸（僅視訊）以及文字軌道
    video.addEventListener('loadedmetadata', function(e) {
      console.log('提示視訊的元資料已載入')
      console.log(e)
    })

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

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

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

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

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

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

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

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

    // 12、waiting：視訊載入等待。當視訊由於需要緩衝下一幀而停止，等待時觸發
    video.addEventListener('waiting', function(e) {
      console.log('視訊載入等待')
      console.log(e)
    })

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

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

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

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

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

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

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

本文轉自https://www.cnblogs.com/rogerwu/p/10072119.html