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

Question

如何在一个巨大的弹出窗口中检测到YouTube视频播放的结束？提供的唯一事件是打开和关闭弹出窗口.可以使用onPlayerStateChange === 0以某种方式使用来自YouTube的iframe或js api来实现此目的吗？

我需要触发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代码.标记需要包含在id="player"旁边class="mfp-iframe".这样,YouTube API就可以了解您要监控的视频.您还需要在参数&enablejsapi=1后面的youtube网址中输入?autoplay=1参数.

3. 神奇的是Magnific Popup 回调.

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

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

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