I am trying to use Bootstrap carousel with videos. I have a list of videos of 5 sec. I need to auto-play them using this carousel.

Currently , Bootstrap plays the very first video but I also wish to automatically play all the others when they slide into the screen.

Example:

/

Code :

 var $myCarousel = $("#myCarousel");
   $myCarousel.carousel({
      interval: 2000
    });

I am trying to use Bootstrap carousel with videos. I have a list of videos of 5 sec. I need to auto-play them using this carousel.

Currently , Bootstrap plays the very first video but I also wish to automatically play all the others when they slide into the screen.

Example:

http://jsfiddle/wxMrf/20/

Code :

 var $myCarousel = $("#myCarousel");
   $myCarousel.carousel({
      interval: 2000
    });

• javascript
• jquery
• twitter-bootstrap

4 Answers 4

I checked the fiddle you have created and you seem to embed the video in an iframe. Assuming you have the plete url of the video file resource available with you, you might want to try encapsulating them in a video tag supported by HTML5. It has an autoplay option associated with it and is supported in all major browsers today (upto IE8).

From W3Schools, you could try something like this in context of your code:

  <div class="item">
    <div class="container">
     <div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
       <video controls autoplay>
         <source src="foobar.mp4" type="video/mp4">
         Your browser does not support the video tag.
      </video>
     </div>
    </div>
  </div>   

Ofcourse, using the video tag limits browser patibility to some extent which is the whole purpose of using an iframein the first place. That's something you can decide. Also, if you are embedding videos from Youtube or Vimeo in an iframe, they almost certainly have an autoplay option in their videos. You should probably read up the relevant docs to get started on that. Hope this helps you out.

Try this:

$myCarousel.on('slid', function() {
    console.log("Slide occur");
    //play video
});​

Note: I think you are using Iframe to play video, so for playing video using this function, you can simply reload Iframe src.

I have created the working jsFiddle, however while accessing 'video' element within iframe throws cross-origin-request security exception.

To overe this start Chrome with following mand,

chrome.exe --allow-file-access-from-files --disable-web-security

Open http://jsfiddle/wxMrf/21/ and see it working

Basically the solution is on the same line what 'Manwal' suggested,

$('#myCarousel').bind('slid', function (e) {
  $('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});

Give this a shot:

$('#myCarousel').bind('slid', function (e) {
  $('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});