javascript - Bootstrap 轮播 - 在模型框中滑动下一张幻灯片时暂停/停止 YouTube 视频

Question

我有 Twitter Bootstrap 模式框，带有轮播多个幻灯片视频和图像。我正在将 YouTube 视频添加到我的 Twitter Bootstrap 轮播中。问题是它会移动仍在后台播放的下一张幻灯片视频，所以我想在下一张/上一张幻灯片上停止/暂停它。

我还需要在关闭 Twitter Bootstrap 模式框时停止 YouTube 视频

我搜索了 SO 但没有找到类似的问题。

Answer 1

试试这个代码

$("video").each(function () { this.pause() });

$('#myCarousel').carousel({
  interval: 0
});
$('.carousel-control.left').click(function() {
  $('#myCarousel').carousel('prev');
});

$('.carousel-control.right').click(function() {
  $('#myCarousel').carousel('next');
  $("video").each(function () { this.pause() });
});
$('button.close').click(function(){
  $("video").each(function () { this.pause() });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="row">
    <div class="span4 offset4">
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
    </div>
</div>

<div class="modal fade hide" id="myModal" data-keyboard="true">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
  </div>
  <div class="modal-body">
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">
          <video width="400" controls>
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
          </video>
        </div>
        <div class="item">
           <img src="http://placehold.it/300x200/aaa&text=Item 2" />
        </div>
        <div class="item">
          <img src="http://placehold.it/300x200/444&text=Item 3" />
        </div>
      </div>
    </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
</div>