Question

我有Twitter Bootstrap模式框，带有轮播多个幻灯片视频和图像。我正在将Twitter视频添加到我的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>

Answer 2

$(function() {
    $('.carousel').on('slide.bs.carousel',function(e){
        var prev = $(this).find('.active').index();
        var next = $(e.relatedTarget).index();
        var video = $('#video-player')[0];
        var videoSlide = $('#video-player').closest('.carousel-item').index();
        if (next === videoSlide) {
            createVideo(video);
        }
    }); 
});

Answer 3

function createVideo(video) {
  var youtubeScriptId = 'youtube-api';
  var youtubeScript = document.getElementById(youtubeScriptId);
  var videoId = video.getAttribute('data-video-id');

  if (youtubeScript === null) {
    var tag = document.createElement('script');
    var firstScript = document.getElementsByTagName('script')[0];

    tag.src = 'https://www.youtube.com/iframe_api';
    tag.id = youtubeScriptId;
    firstScript.parentNode.insertBefore(tag, firstScript);
  }

  window.onYouTubeIframeAPIReady = function() {
    window.player = new window.YT.Player(video, {
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        modestbranding: 1,
        rel: 0
      }
    });
  }
}

posted by mehaboob from digitalizing india

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

3 个答案: