javascript - 在 Magnific Popup 中检测 YouTube 视频的结尾

Question

如何检测在华丽的弹出窗口中播放的 YouTube 视频的结尾？提供的唯一事件是打开和关闭弹出窗口。是否可以使用来自 YouTube 的 iframe 或 js api 以某种方式使用 onPlayerStateChange === 0 来完成此操作？

我需要触发 javascript 在视频结束时显示一个继续按钮，以便用户可以继续到下一个片段。

Answer 1

http://jsfiddle.net/sjvc_phil/s7432z8L/

1. 确保包含 youtube iframe api

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

2. 您需要稍微修改 Magnific Popup iFrame 代码。标记需要在 class="mfp-iframe" 旁边包含 id="player"。这让 YouTube API 知道您要监视哪个视频。您还需要在 ?autoplay=1 参数之后的 youtube url 中添加参数 &enablejsapi=1。

3. 神奇之处在于 Magnific Popup callback .

   callbacks: {
     open: function () {
       new YT.Player('player', {
         events: {
           'onStateChange': onPlayerStateChange
          }
       });
     }
   }
   

   以及视频结束时关闭 Magnific Popup 的功能:

   function onPlayerStateChange(event) {
       if (event.data == YT.PlayerState.ENDED) {
           $.magnificPopup.close();
       }
   }