最小化弹出窗口后，Vimeo 视频仍在后台运行

Question

我在我的网站中嵌入了 vimeo 视频，但是当我在弹出窗口之外单击或单击弹出窗口的关闭按钮时，视频继续在后台播放。

但我需要在弹出窗口关闭时停止视频。

<div class="nav-watch">
    <a class="arw-link"  data-toggle="modal" data-target=".video-modal" href="#">
        Watch Film  <span class="glyphicon glyphicon-menu-right"></span>
    </a>
</div>

<div class="modal fade video-modal" id="videomodel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <button type="button" class="closed" data-dismiss="modal" aria-label="Close">
                <span class="glyphicon glyphicon-remove-circle"></span>
            </button>
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe src="https://player.vimeo.com/video/105864353" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

谁能帮我关闭关闭视频？ 提前致谢

Answer 1

由于您使用的是 Bootstrap 模态，因此您可以侦听 hidden.bs 事件，该事件会在模态隐藏时触发。

Bootstrap Modal Events

hidden.bs.modal

当模式对用户完成隐藏时触发此事件（将等待 CSS 转换完成）​​。

在事件处理程序中，您可以像这样清除 iframe src 属性。

$('#videomodel').on('hidden.bs.modal', function (e) {
    $('iframe').attr('src', '');
})

要在显示模式时填充 iframe src 属性，您可以通过在触发模式的元素上使用 data 属性来传递它。

Varying modal content based on trigger button

有一堆按钮都触发相同的模式，只是内容略有不同？使用 event.relatedTarget 和 HTML data-* 属性（可能通过 jQuery）根据单击的按钮来改变模式的内容。有关relatedTarget 的详细信息，请参阅模态事件文档，

<a class="arw-link" 
    data-toggle="modal"
    data-target=".video-modal"
    href="#"
    data-video-src="https://your-video-url"> <!-- Video URL goes here!!! -->
    Watch Film  <span class="glyphicon glyphicon-menu-right"></span>
</a>

然后监听模式显示并将data-video-src的值添加到iframe src。

$('#videomodel').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var videoSrc = button.data('video-src');
    var modal = $(this);
    modal.find('iframe').attr('src', videoSrc);
})

---

这是Fiddle，因为我们不能在 SO sn-ps 中使用 iframe。

Answer 2

谢谢大家，

我终于找到了解决办法，

有几行 jquery 可以帮助我。

videoSRC = $('iframe').attr('src');
  $(' button.closed').click(function () {
      $(' iframe').attr('src', videoSRC);
  });

 $('.video-modal').on('hidden.bs.modal', function (e) {
      $(' iframe').attr('src', videoSRC);
 });

我也在 jsfiddle 中做了演示。

点击这里查看演示

DEMO

Answer 3

我以前遇到过这个问题。如果我没记错的话，问题发生在 Firefox 和 IE 上，但不是其他浏览器。

这取决于您的弹出窗口的工作方式。当您关闭一个弹出窗口时，弹出窗口的 HTML 标记是否会完全从 DOM 中删除？检查控制台中的元素选项卡。

一些模态弹出系统只是隐藏弹出窗口，但它仍然存在于文档中。一些浏览器无法判断视频不再对用户可见，因此视频会继续播放。

因此，要解决此问题，您必须确保当弹出窗口“关闭”时，它实际上已被完全销毁并完全从文档中删除，而不仅仅是隐藏。

Answer 4

你可以试试这个。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
$('.close').click(function() {
    var iframe = $('#vimeo-player')[0];
    var player = $f(iframe);
    player.api('unload');
});

vimeo-player 是 iframe 的 id

或

var video = $("#playerid").attr("src");
$("#vimeo-player").attr("src","");
$("#vimeo-player").attr("src",video);