jquery - Bootstrap 模式和多个 vimeo 视频

Question

我有一个嵌入了多个视频的页面。每个链接都会在 Bootstrap 模式中打开视频。我遇到的问题是，如果我关闭模式，视频仍在播放。

我找到了一个脚本，可以强制停止此操作，但我的下一个问题是该页面有多个视频。因此，我尝试在单击时将每个视频的 id 捕获到变量中。

我的两个脚本独立工作，我缺少什么才能将它们组合起来？

HTML

<ul>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video3">Video 3</a></li>
    <li><a class="video" href="#" data-toggle="modal" data-target="#video4">Video 4</a></li>
</ul>

这是我必须停止播放视频的 jQuery:

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

这是我设置的用于捕获单击链接的 ID 的变量，这样我就不必将每个 ID 手动添加到上面的脚本中:

$('a.video').click(function(e) {
    editid = $(this).attr("data-target");
    alert(editid);
});

我正在努力找出如何添加变量并使其在第一个 jQuery 部分中工作，从而阻止视频在关闭时播放。

谢谢

Answer 1

您可以在第一次单击时连接处理程序以保留并传递 ID。像这样的事情:

var selector = $(this).attr("data-target");
$(selector).data("HasBeenClicked", true);

但您可能不需要走那么远。您可以扩展监听模式关闭的方式。一旦任何模式关闭，请检查它内部是否有 iFrame。如果是这样，请运行脚本以停止播放。

像这样:

$('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
});

Here's a full example in Plunker

另外，你看过Javascript API吗？ 。您也许可以找到一种实际暂停的方法，这样您就不会丢失视频的缓冲或位置，以防有人返回视频。

来自 Plunker 的完整代码 - 由于沙盒而无法在代码片段上运行

此外，这里还有一些更短的处理程序 JavaScript:

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find("iframe")[0].src += "";
});

示例 HTML:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<ul class="nav" >
  <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
  <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
</ul>

<div class="modal fade" id="video1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Video 1</h4>
      </div>

      <div class="modal-body">

        <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="video2">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Video 2</h4>
      </div>

      <div class="modal-body">

        <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

      </div>
    </div>
  </div>
</div>