How to pause Bootstrap 2 carousel while a video plays in a slider

Question

Here is my Bootstrap 2 carousel that contains one html5 video and 2 images (I have to use Bootstrap 2 and jQuery 1.9.1 in this project):

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

Currently the slider doesn't start on its own so I had to include the .carousel() script to make it start.

Problem: the carousel doesn't pause while the video is playing. How can I make slider pause while the video is playing and then resume after the video is done playing? And then when video slide becomes active again, to make video play again (and slider to pause again)?

Note: The slider will always have only 1 video and unlimited amount of images in any order.

Thank you so much for your help! (Here is the same project on CodePen: https://codepen.io/mashablair/pen/eWLRJg )

Answer 1

Please find the updated code below.

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')
    }
});

And please uncomment the playButton from HTML.