malsup / cycle2

2nd gen cycling
899 stars 238 forks source link

Feature Request: data-cycle-youtube-timeout to provide a different timeout for videos and images #746

Open nick0 opened 8 years ago

nick0 commented 8 years ago

So that you can set a different timeout for videos (eg data-cycle-youtube-timeout=0) and images (eg data-cycle-timeout=5000) in the one Cycle2 slideshow.

This way videos will play for the full length before proceeding to the next slide - and images can change after a specified amount of time.

At the moment in a slideshow containing both images and videos:

Maybe something like this is currently possible or I am missing something? I couldn't see any documentation about it.

I posted a query related to this on Stack Exchange: http://stackoverflow.com/questions/34650242/jquery-cycle2-handling-images-and-videos-differently-in-the-same-slideshow

Thanks for the awesome slideshow Malsup.

ryangiglio commented 8 years ago

Just letting you know here as well, I answered your Stack Exchange question: http://stackoverflow.com/questions/34650242/jquery-cycle2-handling-images-and-videos-differently-in-the-same-slideshow/34774886#34774886

nick0 commented 8 years ago

Thanks Ryan. That sounds like a good plan. It is beyond my limited javascript / programming skills unfortunately. Thanks anyway.

nick0 commented 8 years ago

Another implementation could perhaps be an option to set a timeout per slide. <img src="#" data-title="test img1" data-cycle-solo-timeout="7000"> <a href="#" data-title="test vid1" data-cycle-solo-timeout="0"></a> <img src="#" data-title="test img2"> If not specified like on img2 above, it should take the std data-cycle-timeout setting from the slideshow call. Anyone know how to implement something like this?

thatvideowebguy commented 8 years ago

An idea should be to add an event listener to embed video and call pause and resume function when video switch state. I tried this : function onYouTubePlayerReady(){ console.log("ready"); var players = $('.cycle-youtube embed').each(function(){ if(this.addEventListener) { this.addEventListener('onStateChange', 'handlePlayerStateChange'); }else{ this.attachEvent('onStateChange', 'handlePlayerStateChange'); } }); } function handlePlayerStateChange(state) { switch(state) { case 1: case 3: // Video has begun playing/buffering $('.cycle-slideshow').cycle('pause'); break; case 2: case 0: // Video has been paused/ended $('.cycle-slideshow').cycle('resume'); break; } } not working for now

any help ?