如何基于lite-youtube-embed.js实现视频结束后自动播放下一个视频

要实现这个功能，核心是借助YouTube IFrame Player API的状态监听事件——lite-youtube-embed本质是封装了YouTube的iframe播放器，只需获取内部的播放器实例，监听播放结束状态即可触发下一个视频播放。

具体实现步骤： #

1. 给视频元素添加标识
   给两个lite-youtube标签设置唯一ID，方便后续定位元素：

   <lite-youtube id="video1" videoid="你的第一个视频ID" params="controls=1"></lite-youtube>
   <lite-youtube id="video2" videoid="你的第二个视频ID" params="controls=1"></lite-youtube>
   

2. 监听第一个视频的加载与播放状态
   lite-youtube-embed会在用户首次点击播放后加载真实的iframe，我们可以通过它的liteYoutubeEmbedLoaded事件确保拿到已加载的iframe，再获取内部的YouTube播放器实例并监听状态变化：

   const video1 = document.getElementById('video1');
   const video2 = document.getElementById('video2');
   
   video1.addEventListener('liteYoutubeEmbedLoaded', () => {
     // 获取视频1的iframe元素
     const iframe = video1.getIframe();
     // 获取YouTube播放器实例
     const player = iframe.contentWindow.YT.Player;
   
     // 监听播放器状态变化
     player.addEventListener('onStateChange', (event) => {
       // 状态值0表示视频播放结束
       if (event.data === 0) {
         // 触发第二个视频播放
         video2.play();
       }
     });
   });
   

关键注意事项： #

• 自动播放权限：浏览器的自动播放策略要求视频必须在用户交互后才能自动播放，因此第一个视频需要用户手动点击播放，后续的自动切换才能生效；若需第二个视频自动播放，可在其params中添加autoplay=1。
• API加载：lite-youtube-embed通常会自动加载YouTube IFrame API，若出现播放器实例获取失败的情况，可手动引入API脚本：

  <script src="https://www.youtube.com/iframe_api"></script>
  

• 兼容处理：如果contentWindow.YT.Player无法直接获取，可通过iframe的onReady回调确保播放器初始化完成：

  video1.addEventListener('liteYoutubeEmbedLoaded', () => {
    const iframe = video1.getIframe();
    iframe.onload = () => {
      const player = new YT.Player(iframe, {
        events: {
          'onStateChange': (event) => {
            if (event.data === 0) {
              video2.play();
            }
          }
        }
      });
    };
  });
  

内容的提问来源于stack exchange，提问作者Frost