Carousel autorotate did't stop when you play video on iPad or iPhone

[gusarguello]

Hi,
I was wondering how can I stop the autorotate when I play video. If is possible to start again the autorotate when the video is finished?
Another think is when you use the previous and next in a browser they stop the the rotation (on iPad and iPhone this is not happened), there is any way to continue the autorotation after some time that you click in precious and next?
Thanks,
Gustavo

[basilio]

Hi @gusarguello,
I think it's possible if you know what kind of video player has playing and create a custom function using the video handlers to stop & start rotate. Something like this:

// Create carousel with autoRotate every 4 seconds
$('#gallery').carousel({ autoRotate : 4000 });
// Handler initCarousel to add custom behaviors
$('#gallery').on( 'initCarousel', function(event, defaults, obj){
    // For HTML5 videos
    $(this).find('video').each( function(){
        // using handler playing
        $(this).on( 'playing', function(){
            clearInterval( obj.rotateTime );
        });
        // using handler ended
        $(this).on( 'ended', function(){
            obj.rotateTime = window.setInterval( function(){
                obj.rotate();
            }, defaults.autoRotate );
        });
    });
});

• reference: http://www.w3.org/2010/05/video/mediaevents.html

I have not tested, but might work. Anyway this will depend on the type of video, and can be quite complex to detect in cases like iframes or custom embeds. Maybe you could try to use another approach and detect mouseover & mouseout to the gallery (or click) to stop & start. This case works fine:

• #20

Good luck

[gusarguello]

Hi Basilio,
My video is a normal embed of Youtube (with iFrame), and I'm afraid this custom function doesn't work.
I tried to use youtube API, but I don't know to write the code to get the video status. I tried something like this:

iframe src="http://www.youtube.com/embed/LDcnNGcwQGE?autohide=1&showinfo=0&rel=0&theme=light&version=3&enablejsapi=1&playerapiid=ytplayer" frameborder="0" width="560" height="315"

jQuery(document).ready(function($){
  // Create carousel with autoRotate every 4 seconds
  $('.gallery-07').carousel({ autoRotate : 4000 });
  // Handler initCarousel to add custom behaviours
  // Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
  $('.gallery-07').on( 'initCarousel', function(event, defaults, obj){
      $(this).ytplayer.getPlayerState().each( function(){
          // using handler playing 
          $(this).on( '1', function(){ 
              clearInterval( obj.rotateTime ); 
          };
          // using handler ended
          $(this).on( '0', function(){
              obj.rotateTime = window.setInterval( function(){
                  obj.rotate();
              }, defaults.autoRotate );
          });
      });
  });
});

but not work!
tks,
Gus