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 Modal，因此您可以监听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片段中使用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);

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

4 个答案: