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.
Frank
October 19, 2012 at 7:14 am
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.
Selta
October 22, 2012 at 9:39 pm
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.
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);
})();
Selta
October 22, 2012 at 10:49 pm
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!
Selta
October 25, 2012 at 11:25 pm
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.
Henri
April 20, 2013 at 5:53 pm
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(); } };
Lawrence
September 8, 2015 at 9:38 pm
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.
Galleria uses cookies to provide necessary site functionality. By using our website, you agree to our
Privacy Policy.
I understand
Selta
October 18, 2012 at 11:21 pmHello,
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.
Frank
October 19, 2012 at 7:14 amYes, 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.
Selta
October 22, 2012 at 9:39 pmDang. 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.
Frank
October 22, 2012 at 10:28 pmActually, 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:
Selta
October 22, 2012 at 10:49 pmOh 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!
Selta
October 25, 2012 at 11:25 pmHey 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.
Henri
April 20, 2013 at 5:53 pmTo 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(); } };
Lawrence
September 8, 2015 at 9:38 pmHi,
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 isout? 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.