Question

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

我发现了一个会强制停止的脚本但是我的下一个问题是该页面有多个视频。所以我试图在点击时将每个视频的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的完整代码 - 由于Sandbox

，无法在Snippets上运行

此外，这里有一些甚至更短的javascript for the handler：

$('.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>

Answer 2

上面的答案很有用。我也玩了一遍，这个剧本的表现也一样，所以我会分享，以防其他人在看：

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

只需定位类名而不是ID，就可以满足我的需求以及上述解决方案。

Bootstrap模式和多个vimeo视频

2 个答案:

Here's a full example in Plunker

Plunker的完整代码 - 由于Sandbox