Question

我正试图找出使用ZURB Reveal Modal Plugin实现嵌入式Youtube视频的最佳方式。

到目前为止，我有以下工作，并在使用“.modal-close”关闭模态窗口时暂停视频。但是，当点击“.modal-bg”时它无法正常工作:(任何想法为什么？同样我想在视频播放完毕后关闭模态窗口。

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      events: {
        'onReady': onPlayerReady
      }
    });
}

function onPlayerReady(event) {
    $(".modal-close, .modal-bg").on('click', function() {
        player.stopVideo();
    });
}

var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

我在这里设置了一个小提琴： http://jsfiddle.net/M53GQ/8/

谢谢！

Answer 1

第一个问题可以通过jQuery处理事件委托的方式来解决。基本上，因为在绑定发生后，创建了类.modal-bg的元素，所以它不会触发停止视频的调用。相反，您应该在文档正文中使用委托函数，以便当click事件冒泡时，即使对于在初始绑定之后创建的元素，它也可以检测到正确的类匹配。换句话说，将onPlayerReady函数更改为如下所示：

function onPlayerReady(event) { $("body").delegate('.modal-close,.modal-bg','click', function() { player.stopVideo(); }); }

要在视频完成时关闭模式，您需要为播放器设置onStateChange处理程序。首先，在创建YT.Player对象时将其添加到events参数：

'onStateChange': onPlayerStateChange

然后定义回调：

function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { // close your modal here } }

使用ZURB Reveal Modal Plugin控制Youtube视频

1 个答案: