Twitter Bootstrap Question posted in

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

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 )

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem is solved by adding the id="videoSlide" to the video slide: 

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

    and this script (the logic is in the comments): 

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

    Here is the working demo: https://codepen.io/mashablair/pen/aWaqVZ?editors=1010


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search