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

Question

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

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

Answer 1

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

确保包含 youtube iframe api

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

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

魔术就在 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();
    }
}

Answer 2

详细说明上面的解决方案。您可以通过扩展 iframe 标记选项来包含 "player" id 和 enablejsapi，而无需从 magnificPopup

编辑核心代码

$('#play').magnificPopup({
    type:'iframe',
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
        '<div class="mfp-close"></div>'+
        '<iframe id="player" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
        patterns: {
            youtube: {
                index: 'youtube.com/',
                id: 'v=',
                src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1&enablejsapi=1'
            }
        },
        srcAction: 'iframe_src',
    },
    callbacks: {
      open: function () {
        new YT.Player('player', {
          events: {
            'onStateChange': onPlayerStateChange
           }
        });
      }
    },
    midClick: true,
    closeOnBgClick: false,
    removalDelay: 500,
    mainClass: 'mfp-fade mfp-video',
});

Answer 3

法律感谢，使用音乐播放器 jPlayer 并希望在视频播放时暂停音乐以及在视频结束后从您离开此处的位置播放音乐的提示是对扩大此解决方案的贡献

function onPlayerStateChange(event) {
           $("#jquery_jplayer_1").jPlayer("pause");
            if (event.data == YT.PlayerState.ENDED) {
                 $.magnificPopup.close();
                $("#jquery_jplayer_1").jPlayer("play");
            }
        }

Answer 4

致正在寻找 GA 活动 GetCurrentTime

我一直在寻找当前视频播放的时间，但是使用 magnificPopup 很难找到。我有一个 'player.getCurrentTime()' not a function or undefined 的错误。通过查看不同的代码，我可能会混淆它。

然后我尝试使用在对象外部声明的变量来启动对象并且它起作用了。因此必须将对象声明为外部变量，然后在对象定义中您可以访问其方法。

                var ytplayer
                $('.js-popup-video').magnificPopup({
                    type: 'iframe',
                    iframe: {
                        markup: '<div class="mfp-iframe-scaler">'+
                            '<div class="mfp-close"></div>'+
                            '<iframe id="ytplayer" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                            '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
                        patterns: {
                            youtube: {
                                index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
                                id: 'v=', // String that splits URL in a two parts, second part should be %id%
                                src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1&enablejsapi=1' // URL that will be set as a source for iframe.
                            }
                        },
                        srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
                    },
                    callbacks: {
                        open: function() {
                           var ytplayer = new YT.Player('ytplayer', {
                                events: {
                                    'onStateChange': function onPlayerStateChange(event) {

                                        if (event.data == YT.PlayerState.PLAYING) {
                                            console.log('PLAYING')
                                        }

                                        // track when user clicks to Pause
                                        if (event.data == YT.PlayerState.PAUSED) {
                                            console.log('PAUSED')
                                            console.log(ytplayer.getCurrentTime())
                                        }

                                        // track when video ends
                                        if (event.data == YT.PlayerState.ENDED) {
                                            console.log('ENDED')
                                        }
                                    }
                                }
                            })
                        }
                    },
                    mainClass: 'mfp-anim-in'
                });

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

Detect end of YouTube video in Magnific Popup

javascript

youtube

video

jquery