javascript - 模态关闭后，vimeo 视频中的音频继续

Question

我有一个在模态窗口中播放的 vimeo 视频。它在除 safari 之外的所有浏览器中都运行良好(尚未在 Internet Explorer 中进行测试)。在 Safari 中，关闭窗口会隐藏视频，但不会停止音频播放。

我正在使用 bpopup:jquery.bpopup.min.js 和jquery 1.10.2

这是触发模式窗口的链接:

<li id="li1"><a href="#">Reel</a></li>

以及打开视频的jquery:

 <script>
// $ is assigned to jQuery
 ;(function($) {
    $(function() {
        $('#li1').bind('click', function(e) {
            e.preventDefault();
            $('#reel').bPopup({
                modalClose: true,
                opacity: 0.6,
                positionStyle: 'fixed' //'fixed' or 'absolute
});});});})(jQuery);
    </script>

还有视频本身:

<div id="reel">
    <a class="b-close">X<a/>
     <iframe src="http://player.vimeo.com/video/86850935?byline=0&amp;portrait=0&amp;color=c9ff23" width="500" height="334" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>

我对 jquery 相当陌生，过去几天我一直在努力解决这个问题，但没有成功。

编辑:我选择的样式-

<style>

body{
font-family: 'Play', sans-serif;
color:#FFF; 
width:100%;
height:100%;
background-color:#000;
}


#reel{ 
display:none; 
}
.b-close{
cursor:pointer;
position:absolute;
right:-20px;
top:0px;
width:10px;
height:10px;
}

Answer 1

您需要在 bPopup 中的 onClose 回调上设置一些逻辑(请参阅第 4 节: http://dinbror.dk/bpopup/ )。一种选择是使用 Vimeo JavaScript API:http://developer.vimeo.com/player/js-api

另一个选项是重置 iframe src。下面是一些实现这一点的 JavaScript 示例:

$(function() {
  $('#li1').bind('click', function(e) {
    e.preventDefault();
    $('#reel').bPopup({
        modalClose: true,
        opacity: 0.6,
        positionStyle: 'fixed', //'fixed' or 'absolute
        onClose: function() {
          var iframe = $('#reel iframe'),
              iframe_src = iframe.attr('src');

          iframe.attr('src', '');
          iframe.attr('src', iframe_src);
        }
    });
  });
});