HTML5 Video 實現視頻列表自動循環播放

需求分析

頁面有一組視頻地址，需實現：第一個視頻播放結束後自動載入並播放下一個，循環往複。

核心思路：監聽 ended 事件

<video> 元素提供 ended 事件，當播放結束時觸發。在事件處理器中切換 src 並調用 play() 即可實現無縫銜接。

完整代碼示例

<video id="player" controls autoplay></video>
<script>
  const videoList = [
    'video1.mp4',
    'video2.mp4',
    'video3.mp4'
  ];
  let currentIndex = 0;
  const player = document.getElementById('player');

  function playNext() {
    currentIndex = (currentIndex + 1) % videoList.length;
    player.src = videoList[currentIndex];
    player.load(); // 重新加載資源
    player.play().catch(e => console.warn('自動播放被阻止:', e));
  }

  player.addEventListener('ended', playNext);

  // 初始化第一個視頻
  player.src = videoList[0];
</script>

關鍵點說明

• load()：切換 src 後必須調用，否則瀏覽器可能不會重新請求新視頻。
• play() 返回 Promise：現代瀏覽器自動播放策略可能阻止，需捕獲異常並引導用戶交互。
• 循環邏輯：使用取模運算 % videoList.length 實現無限循環。

進階優化

• 預加載下一個視頻（preload="auto" 或手動創建 <video> 預緩存）。
• 添加載入狀態提示，避免切換間隙黑屏。
• 支持手動切換、播放進度記憶等功能。