Hello,
Using the Classic theme, is it possible to stop the AutoPlay on
any kind of interaction? pauseOnInteraction doesn’t quite
accomplish what I want. Basically, if there’s an embedded YouTube
video in one frame, and you simply click the Play button, AutoPlay
keeps scrolling the frames, stopping the video etc.
pauseOnInteraction works fine if someone clicks a thumbnail or the
left/right arrow, but not clicking the play button. I noticed that
even the example Twelve theme does this on the main page. If you
click the “play” button to start AutoPlay, then click “play” on the
Viemo video, it still scrolls to the next frame, stopping the
video.
I hope there’s a way around this. I’d like to have AutoPlay always
on, but don’t want like how it handles video playback with it
on.

Yes, this is a problem because the video providers use their own
API to control events. You would have to listen to each
provider’s API events and disable/enable autoplay whenever
someone does “something” in their API.

Dang. So basically what you’re saying is this is beyond my
capability. That sucks… this script is so close to perfect out of
the box, but this is a big dealbreaker for us.

Actually, I kind of solved it for youtube using some custom
coding: http://jsfiddle.net/WS8dT/

The trick is to invoke the API and listen for the stateChange
event. If it says “playing”, then stop the slideshow.

The implementation is kind of awkward, and the event
doesn’t actually happen until the video preload spinner
stopped, so chances are that that the autoplay slides to the next
before the video is loaded.

Well, it‘s the best I can do with the very limited youtube
API:

Galleria.run('#galleria',{
    youtube: { enablejsapi: 1},
    autoplay: 10000
});

Galleria.ready(function() {
    var player;
    var stateChange = function(e) {
        if ( e.data == 1 ) {
            $('#galleria').data('galleria').pause();
        }
    };
    this.bind('image', function(e) {
        if(e.galleriaData.iframe) {
            var temp = 'if'+new Date().getTime();
            e.imageTarget.id = temp;
            player = new YT.Player(temp, {
                events: {
                    "onStateChange": stateChange
                }
            });
        } else {
            iframe = false;
        }
    });
});

(function(){
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

Oh man, freaking awesome! I need to learn JS myself at some
point (obviously sooner than later). Thank you so much for putting
that together though, I appreciate it a lot. It might be “awkward”,
but it works fine for my current application! THANK YOU!

Hey David,
I hope you have some time to further look at this. One thing I
stumbled on was that this does not seem to work in IE. It works
perfectly as expected in FireFox though. In IE, clicking in the
youtube slide to play, it still scrolls. In FireFox, when you click
to play, the scrolling stops.

To pause the gallery even while preloading/bufering, change:

var stateChange = function(e) {
if ( e.data == 1 ) { $(‘#galleria’).data(‘galleria’).pause(); }
};

to

var stateChange = function(e) {
if ( e.data == 1 || e.data == 3 ) {
$(‘#galleria’).data(‘galleria’).pause(); } };

Hi,

Sorry in advance as I realise this thread is pretty old but I
was wondering if anybody had any luck attaching the
statechange handler now that V3 of the Youtube API is
out? I used to use the code snippet above to automatically resume
the Galleria slideshow when a Youtube video finished (which worked
a treat, thanks David!) but since upgrading Galleria to Version
1.4.2 it no longer works (it looks as if 2 separate youtube videos
are being loaded, one after another).

I tried to dig into this myself and noticed that
e.imageTarget.id no longer exists, but haven’t got much further
yet.