Question

这是我的Bootstrap 2轮播，包含一个html5视频和2个图像（我必须在此项目中使用Bootstrap 2和jQuery 1.9.1）：

＆＃13;

// without this script, the slider doesn't start on it's own:
  !function ($) {
    $(function(){
      $('#homepage_slider').carousel()
    })
  }(window.jQuery)

＆＃13;

#homepage_slider video { 
    min-height: 100% !important;
    min-width: 100% !important;
	height: auto !important;
    width: auto !important;
	overflow: hidden;
}

#homepage_slider img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

.carousel-inner>.item>img {
  display: block;
  line-height: 1;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<div id="banner">

         
<!-- Slider begins here -->
<div id="homepage_slider" class="carousel slide">
  <ol class="carousel-indicators">
		<li data-target="#homepage_slider" data-slide-to="0" class="active"></li>
		<li data-target="#homepage_slider" data-slide-to="1"></li>
		<li data-target="#homepage_slider" data-slide-to="2"></li>
	</ol>
			  
  <!-- Carousel items -->
<div class="carousel-inner">
	<!-- slide #1 -->
	<div data-slide="0" class="item active">
		<video title="1" id="bgvid" autoplay loop muted poster="http://www.thefrasier.com/wp-content/themes/frasier/images/Frasier_Home_120314.jpg"><source src="http://www.thefrasier.com/wp-content/uploads/2014/12/0_final_reel_home.webm" type="video/webm">Your browser does not support the video tag.</video>
	</div>
			  			  
	<!-- slide #2 (image) -->
    <div data-slide="1" class="item">
      <img title="2" alt="image of hotel" src="http://hdcoolwallpapers.com/wp-content/uploads/2014/09/Hd-Ocean-Wallpapers-5.jpg">
	</div>
	<!-- slide #3 (image) -->
	<div data-slide="2" class="item">
      <img title="3" alt="image of apartment" src="http://imgs.abduzeedo.com/files/gismullr/beautifulhouses/bh306/wh01.jpg">
	</div>
 
  </div> <!-- end of '.carousel-inner' -->

	<!-- Carousel nav -->
	<a class="carousel-control left" href="#homepage_slider" data-slide="prev">&lsaquo;</a>
	<a class="carousel-control right" href="#homepage_slider" data-slide="next">&rsaquo;</a>
  </div> <!-- end of '#homepage_slider' -->
  <!-- Slider ends here -->
 

</div>  <!-- end of "#banner" -->

＆＃13;

目前滑块并不是自己开始的，所以我必须包含.carousel（）脚本才能启动它。

问题：播放视频时，旋转木马不会暂停。如何在视频播放时使滑块暂停，然后在视频播放完毕后恢复？然后当视频幻灯片再次激活时，再次进行视频播放（滑块再次暂停）？

注意：滑块总是只有1个视频和任意数量的无限量图像。

非常感谢你的帮助！（这是CodePen上的相同项目：https://codepen.io/mashablair/pen/eWLRJg）

Answer 1

请在下面找到更新后的代码。

var vid = document.getElementById("bgvid");
var playButton = document.querySelector("#slider-play-button button");

playButton.addEventListener("click", function() {
    if (vid.paused) {
        vid.play();
        playButton.classList.remove("play-video-button");
        playButton.classList.add("pause-video-button");
        $('#homepage_slider').carousel('pause')
    } else {
        vid.pause();
        playButton.classList.add("play-video-button");
        playButton.classList.remove("pause-video-button");
        $('#homepage_slider').carousel('cycle')
    }
});

请从HTML中取消注释playButton。

Answer 2

通过在视频幻灯片中添加id =“videoSlide”来解决问题：

<div data-slide="0" id="videoSlide" class="item active">

和这个脚本（逻辑在评论中）：

<script> 
// if video slide is active, play video & pause carousel
// if video done playing, continue to cycle carousel
$(document).ready(function() {
    var vid = document.getElementById("bgvid");
    if ($("#videoSlide").hasClass("active")) {
        vid.play();
        $('#homepage_slider').carousel('pause');
    }
    document.getElementById('bgvid').addEventListener('ended', function(e) {

        $('#homepage_slider').carousel('cycle');
    });
    // this jQuery event listener checks every slide to see if it's a video slide
    // and if it's active.  If yes/yes, it plays a video and pauses carousel again.
    $("#homepage_slider").on('slid', function() {
        if ($("#videoSlide").hasClass("active")) {
            vid.play();
            $('#homepage_slider').carousel('pause');
        }
    });
});
</script>

以下是工作演示：https://codepen.io/mashablair/pen/aWaqVZ?editors=1010

如何在滑块

2 个答案: