Your Cart

Stop AutoPlay on any kind of interaction

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums Questions Stop AutoPlay on any kind of interaction

  • gravatar
    Selta
    October 18, 2012 at 11:21 pm

    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.


    gravatar
    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.


    gravatar
    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.


    gravatar
    Frank
    October 22, 2012 at 10:28 pm

    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);
    })();
    


    gravatar
    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!


    gravatar
    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.


    gravatar
    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(); } };


    gravatar
    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