malsup / cycle2

2nd gen cycling
899 stars 236 forks source link

First Video slide wont autoplay #275

Open Balboa1990 opened 11 years ago

Balboa1990 commented 11 years ago

I am having trouble for my cycle2 video slider to autoplay the first slide. I have looked at previous posts on here and seems to be no solution to this problem. I have the following code but it just seems to break the slider- does anyone have any suggestions? I can get the videos to play and pause when the slider transition has been applied:

$('.slideshow-video-gallery').on( 'cycle-post-initialize', function(event,opts, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){

    $('#video-one')[0].play();

    $('#video-two')[0].stop();

});

$('.slideshow-video-gallery').cycle();

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

//Triggered just prior to a transition to a new slide.
$( 'slideshow-video-gallery' ).on( 'cycle-before', function(event, optionHash, outgoingSlideEl, outgoingSlideEl, forwardFlag) {
    $('video', outgoingSlideEl)[0].stop();
});
albell commented 10 years ago

Three thoughts:

1) Depending on what video API you're using, you may need to run some kind of check that the video is loaded and available, especially if it's running in an iframe, like Vimeo. In principle, for html5 video in markup, what you've written should work, assuming your video scripts are loaded before your cycle script.

2) You have to set the listener for post-initialize before initialization has actually occurred, or it won't fire. If you're calling this script after the slideshow has been initialized, nothing's gonna happen. Listeners only fire on future events. So basically just make sure you're initializing later.

3) Why are you trying to pass all those extraneous arguments to the post-initialize anonymous function? Why not just the event and the optionHash, like it says in the docs?

If none of these help, can you post a jsfiddle illustrating the problem?