How to pause 2 carousel downloads while playing a video in the slider

Question

Here is my Bootstrap 2 carousel in which there is 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 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" -->
  

Run codeHide result

Currently, the slider does not start on its own, so I had to include the .carousel () script to run it.

Problem: The carousel does not stop during video playback. How to pause the slider during video playback, and then resume video playback? And then, when the video slide is activated again to play the video again (and the slider pauses again)?

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

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

, , playButton HTML.

Answer 2

id = "videoSlide" :

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

script ( ):

<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 a video slide
    // and if it 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