最小化弹出窗口后，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

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

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

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

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

Answer 2

你可以试试这个。

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

Answer 3

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

Bootstrap Modal Events

hidden.bs.modal

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

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

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

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

Varying modal content based on trigger button

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on 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 代码段中使用 iframe。

Answer 4

谢谢大家，

终于找到解决办法了，

有几行 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

最小化弹出窗口后，Vimeo 视频仍然运行在背景中

Vimeo video still running on background after minimizing the pop up

php

wordpress

video

jquery

vimeo

最小化弹出窗口后，Vimeo 视频仍然 运行 在背景中

Vimeo video still running on background after minimizing the pop up

php

wordpress

video

jquery

vimeo

最小化弹出窗口后，Vimeo 视频仍然运行在背景中