Question

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

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

Answer 1

确保包含youtube iframe api

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

您需要稍微修改Magnific Popup iFrame代码。标记必须包含id="player"旁边的class="mfp-iframe"。这样，YouTube API就可以了解您要监控的视频。您还需要在&enablejsapi=1参数后的youtube网址中添加参数?autoplay=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（）”不是函数或未定义。通过查看不同的代码，我可能将其混淆了。

然后，我尝试使用在对象外部声明的变量来初始化对象，并且该对象可以正常工作。因此，必须将对象声明为外部变量，然后在对象定义内部可以访问其方法。

                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视频的结尾

4 个答案: