CSS-Tricks/AnythingSlider

Problem in resumeOnVisible when set to false

josephca88 opened this issue · 4 comments

@Mottie Hi there I just want to report this issue regarding of the option resumeOnVisible it seems not working when its set as false. I noticed that when I pause the video and the slides continue the transition when goes back to the slide that has the video been paused it seems that the video will play automatically and on the description it should remained paused since the option is false.

Take a look on how I set the options:

$("#slider")
    .anythingSlider({
        autoPlay: true,
        autoPlayLocked: true,
        autoPlayDelayed: true,
        addWmodeToObject: 'transparent',
        resizeContents: true,
        buildArrows: false,
        buildStartStop: false,
        delay: 2000,
        resumeOnVideoEnd: true,
        resumeOnVisible: false,
        hashTags: false,
        enableKeyboard: false,
        infiniteSlides: false,
        stopAtEnd: true
    });

Any thoughts about it if maybe I just misunderstood the options description.

Thank you

Hi @josephca88!

Actually, resumeOnVisible is only meant to work when the mode is set to fade. The difference is that when jQuery uses fadeOut() it animates the opacity to zero, then sets the panel as disaply: none. And when a video is inside of the panel, display:none causes it to restart/reset from the beginning.

So, setting resumeOnVisible to false uses fadeOut(), but when it's true the plugin just animates the opacity to zero and doesn't hide it; and as mentioned, this allows the video to be resumed when it is visible again.

I'll look at the docs and try to make this more clear.

Edit: LOL oh wait!... I haven't looked at the code in so long hang head. Yeah I guess I didn't look at the code within the video extension. It does look like it is supposed to leave a video paused. I wonder if the video APIs have changed again. What video service are you referring to?

Edit2: It looks like it's working for Vimeo embeded video... I'll test the other services when I get some time today.

Hi @Mottie

Thanks for your response about my concern. Anyway, so it's working with Vimeo well we are using HTML5 video tag on our site to play video in the slider.

Here is a link to our demo site using http://driveforpgt.eversun.ph/company-driver-trucking-jobs.html feel free to check and confirm there regarding the issue.

Anyway I will wait also for the result of your test to other services.

Thank you

So it looks like Vimeo works (embedded & iframe). Youtube iframe, but not the embedded (it doesn't seem to pause at all anymore; I wonder if the API changed again) - updated demo.

And it doesn't work at all with HTML5 video because I forgot to include the option check LOL.

So if you aren't using YouTube, you should be okay. For HTML5 video, modify this part of the code to include a check of the resumeOnVisible option:

    // *** HTML5 video ***
    video : {
        selector : 'video',
        cont : function(base, vid, index){
            var $vid = $('#' + vid);
            if (base.options.resumeOnVisible && $vid.length && $vid[0].paused && $vid[0].currentTime > 0 && !$vid[0].ended) {
                $vid[0].play();
            }
        },

I'll include this fix in the next update.

Hi @Mottie

Ok I will update my source with this snippet. Thank you very much for this and for your quick support regarding the issue.

Keep up the good work and I hope you continue to update this plugin.

Thanks again. 👍