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);
        }
    });
  });
});

模态关闭后，来自vimeo视频的音频继续播放

1 个答案: