使用 ZURB Reveal Modal Plugin 控制 Youtube 视频答案

【问题标题】：Using ZURB Reveal Modal Plugin to control Youtube video使用 ZURB Reveal Modal Plugin 控制 Youtube 视频
【发布时间】：2013-12-05 10:02:54
【问题描述】：

我正在尝试找出使用 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/

谢谢！

【问题讨论】：

标签： jquery youtube-api zurb-foundation

【解决方案1】：

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

【讨论】：