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