Response title
This is preview!
jQuery Cycle2 Video Slider
in Using jQuery
•
9 years ago
I have a video slider that is implemented with cycle 2 (http://jquery.malsup.com/cycle2/api/#events)
With this code, the videos autoplay/stop:
- $('.video-slideshow').cycle();
- //Triggered after the slideshow has completed transitioning to the next slide.
- $( '.video-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
- $('video', incomingSlideEl)[0].play();
- });
- //Triggered just prior to a transition to a new slide.
- $( '.video-slideshow' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, outgoingSlideEl, forwardFlag) {
- $('video', outgoingSlideEl)[0].stop();
- });
But then the first slide is missed out as of the transaction and to solve this i needed another function to autoplay the video when the slider is initialised. Now this is where im really stuck. He uses a youtube plugin and i've tried to implement the code from there for my html5 videos and i can get the video to autoplay with the following code but the slider breaks. Anyone have any suggestions how to get the first video to autoplay?
- $('.video-slideshow').on( 'cycle-initialized cycle-after', function(e, opts ) {
- alert('hello');
- $('video'[ index ])[0].play();
- var index = e.type == 'cycle-initialized' ? opts.currSlide : opts.nextSlide;
- $(opts.slides[ index ] ).find('video').play();
- });
1