CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
anam
anam

Reputation: 3913

bootstrap carousel autoplay,start videos when slide activates

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.net/wxMrf/20/

Code : 

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

Upvotes: 1

Views: 17638

Answers (4)

jkgh
jkgh

Reputation: 1

Give this a shot:

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

Upvotes: 0

Gaurang Patel
Gaurang Patel

Reputation: 4530

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

To overcome this start Chrome with following command,

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

Open http://jsfiddle.net/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();
});

Upvotes: 1

Manwal
Manwal

Reputation: 23816

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.

Upvotes: 1

Vivek Pradhan
Vivek Pradhan

Reputation: 4847

I checked the fiddle you have created and you seem to embed the video in an iframe. Assuming you have the complete 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 compatibility 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.

Upvotes: 1

Related Questions