autoplay video in slider

Question

I am using the cycle2 plugin, and i have a video gallery and what i am after is when the current slide is shown, autoplay the video.

He does have a similar plugin for this but it looks like it's only for youtube whereas i am using the video html tag with fallbacks: http://jquery.malsup.com/cycle2/demo/video.php

Obviously i cant can't add autoplay to the videos as they all play at once and not sure how to handle this. Is there a way around from his api url: http://jquery.malsup.com/cycle2/api/ or will i have to create a function from scratch that when a certain slider is selected, play/stop.

I am using his hashing example that is on his website as well.

If anyone has any ideas where to start or the right direction to a solution i would be grateful as i've looked at this for hours!

Here is a link to an example of how the video is integrated into the cycle2 slider:

http://jsfiddle.net/8dcWv/

<video width="100%" height="100%" controls="controls">
  <source type="video/mp4" src="" />
  <source type="video/webm" src="" />
  <source type="video/ogg" src="" />
  <object width="100%" height="100%" type="application/x-shockwave-flash" data="">
  <param name="movie" value="" />
  <param name="flashvars" value="controls=true&file=" />
  </object>
</video>

plugin url: http://jquery.malsup.com/cycle2/demo/video.php

This url could be helpful to trigger first slide: https://github.com/malsup/cycle2/issues/25

Answer 1

I think something like this should work.

//Triggered after the slideshow has completed transitioning to the next slide.
$( '#mySlideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('video', incomingSlideEl)[0].play();
});

//Triggered just prior to a transition to a new slide.
$( '#mySlideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('video', outgoingSlideEl)[0].pause();
});