模态关闭后，来自vimeo视频的音频继续 [英] Audio from vimeo video continues after modal has closed

问题描述

我有一个在模态窗口中播放的vimeo视频.除了safari(尚未在Internet Explorer中测试过)之外，它在所有浏览器中都可以正常工作.在野生动物园中，关闭窗口会隐藏视频，但不会停止音频播放.

I have a vimeo video that plays in a modal window. It works just fine in every browser except for safari (haven't tested it in internet explorer). In safari, closing the window hides the video but doesn't stop audio playback.

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

I'm using bpopup:jquery.bpopup.min.js And jquery 1.10.2

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

This is the link that triggers the modal window:

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

打开视频的jQuery:

And the jquery that opens the video:

 <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还是很陌生，最近几天我一直在徘徊，努力解决此问题无济于事.

I'm fairly new to jquery, and I've spent the last few days stumbling around in an effort to solve this problem to no avail.

我的选择样式-

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

推荐答案

您需要在bPopup中的onClose回调上设置一些逻辑(请参见第4节: http://developer.vimeo.com/player/js -api

You'll want to setup some logic on the onClose callback within bPopup (see section 4: http://dinbror.dk/bpopup/). One option is to use the Vimeo JavaScript API: http://developer.vimeo.com/player/js-api

另一个选择是重置iframe src.这是一些实现此目的的JavaScript示例:

Another option is to reset the iframe src. Here is some example JavaScript that accomplishes that:

$(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视频的音频继续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！