javascript - 如何在 slider 中播放视频时暂停 Bootstrap 2 轮播

Question

这是我的 Bootstrap 2 轮播，其中包含一个 html5 视频和 2 个图像(我必须在此元素中使用 Bootstrap 2 和 jQuery 1.9.1):

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

#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;
} 

<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" -->
  

目前 slider 不会自行启动，因此我必须包含 .carousel() 脚本以使其启动。

问题:播放视频时轮播不会暂停。如何在播放视频时让 slider 暂停，然后在播放完视频后恢复？然后当视频幻灯片再次激活时，让视频再次播放(和 slider 再次暂停)？

注意: slider 将始终只有 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 中的播放按钮。