Slider does not pause on video playing

[yveslebeau]

Hi,

I am using anythingslider and I only have embeded youtube videos. The problem is that when the page load I fetch the videos via ajax and then create my ul. Once this is done, I then call the anythingslider code. All works fine except if I do not press anything but play on the first video, the slider doesn't stop and the sound keeps playing in background.

Anyone having the same issue?

[yveslebeau]

You can have a look at the problem here:

http://dev.capetownactiva.com

[Mottie]

It seems to be working for me when I test it in Chrome. Are you having trouble in a specific browser?

Maybe, if you run the video extension after the ajax has set up the video it might solve your problem...

$('#slider1').anythingSliderVideo();

But really, the video extension needs to be completely rewritten as it still has many issues with YouTube.

[kikbo]

I'm having the same problem.

While the slider is in "slideshow" (autoplay is on), starting an embedded youtube video does not stop it.

If you download the latest code and use the video.html you will see this problem.

I feel like it has something to do with issue #331 but don't quote me on that.

[kikbo]

Just realized that this is the same thread at #191...

[Mottie]

@kikbo Actually the other issue is for YouTube iframe while this one is for YouTube embedded.... but essentially the same problem.

[kikbo]

Yeah you're right. I tested both :-/

Any ETA on a fix?

Respect for the continued attention to the slider project!

[maggiewes]

Just wondering if a fix for this might be in the works, or if anyone knows of a workaround?

Thanks in advance! Great slider.

[Mottie]

I still haven't gotten around to rewriting the video extension, but I've just recently made a change to the fade mode. It now uses the resumeOnVisible option (it made sense to me somehow) that when set to true (default) the non-current panels would only fade the opacity to zero and not hide the panel using display: none. If false the panels would fade and hide, so this should completely hide any videos behind the current panel and stop them from playing as well.

So setting the resumeOnVisible option to false will stop all playing videos, even without the video extension.

[CupcakeBits]

Hi Mottie,
I had follow, read, research and do what I can to find a solution to stop the slider when the video is playing,
my settings and page are pretty much a copy of what you have in your demo http://jsfiddle.net/Mottie/ycUB6/94/ ,
but obviously there also the problem exist. One thing I notice is that for example if you don't use the autoplay, everything will work like it should, but you have to go clicking at the arrows to move between transitions. In my case I am trying to setup the Slider with Flow Player.
Is there a chance to put like a listener to the click event when playing the video, and pass that to the slider? I wisht to know how to do that, hopefully you will come with a solution soon!, Thanks for your great job.

[josephca88]

Hello Mottie,

I have been reading some of the comments of this issue and I have read your comment that its working with Chrome, yes its really working and regarding what you ask if what specific browser the issue exist well I've tried it with Firefox and it seems not working properly the slide won't stop if a video is playing. I am using HTML5 video tag to play video on the slide and yes it really has an issue to other browsers except to Chrome.

I did follow your codes in your demo files but the slide still continues. Just to point out also that your demo about videos when I test it on Firefox its not working properly like I said or this issue pointed out the slide won't pause while a video is playing.

Is there any workaround that I can use so that the issue won't exist on other browsers? I like this plugin and I can't find any other jquery plugin that suits to my template requirements.

Best regards, Thank you

[Mottie]

Hi @josephca88!

SInce you are using HTML5 video, maybe try using the code from this demo. It's not using the video extension. Please see if it works for you, it seems to work for me without any problems in Firefox.

[josephca88]

@Mottie Hi there thanks for your response to my comment. I would like to ask also if what version of Firefox you are using it seems that I am using now the latest version of FF and the video is not playable now and I received this warning message on the firebug console.

Specified "type" attribute of "video/mp4" is not supported. Load of media resource media/myvideo.mp4 failed.

Please let me know the version you are using with so I can switch back to that version and I'll test if it really works using the demo you have given.

I would like also to ask if I use AnythingSlider together with VideoJS will it work? Because I am using an event from VideoJS to hide the caption when video is played.

Thanks 👍

[Mottie]

Hi @josephca88!

Firefox won't support mp4 video until the next update (v21). The demo I shared has video sources in ogg, webm and mp4 formats to cover all the bases.

[josephca88]

@Mottie Hi thanks for your fast response, ok now I get it. Just tested with other format using FF (ogv/ogg and webm) and it seems to work properly. Now the only concern remains is on Safari (v5.1.7) it seems that its not working correctly and what the issue pointed out that slides not being pause still remains.

PS: I've just read about Safari for Windows and apple will no longer release a latest version for the OS. Any thoughts about it if the the version I have will really have an issue using HTML5 video tag?

Thanks 👍

[Mottie]

Sorry, I don't have all the answers for you. I don't own a Mac and I haven't had any time to research why Safari isn't behaving as expected. I was hoping someone would contribute some knowledge or code to help out.

I didn't know that Safari will no longer support Windows... oh well, one less browser for me to test on. I don't have any plans on buying a mac or ipad either.

[josephca88]

@Mottie No problem it's ok and right now it seems everything is working fine and also I've just exclude Safari browser in my test. Thanks for this plugin by the way.

[mezod]

Hello,

I also have the problem that the slider won't stop the autoplay when a video is running. I followed this demo http://css-tricks.github.io/AnythingSlider/video.html#&panel1-1 where it seems to work smoothly for youtube's iframe.
You can find my approach here: http://www.galeriacontrast.com.mialias.net/ It is a very simple slide between an image and a video.
When I had it in local it wouldn't work but I could see that my browser was somehow blocking the access to the iframe and I read this was a common issue, but now I moved it to a server and the problem persists. Any light on the issue is well appreciated!

[josephca88]

@Mottie
Hi its been a while and I do have concerns again regarding slideshow not being paused when video is playing this time is when I use IE8. I have a hard time debugging on it just to find out how to fix it. What I did is adding an alert message to check if video.len is not 0 inside video.control function. But surprisingly it returns 0 instead of a greater value which is usually what it returns when I use Chrome browser so I assume that's the cause why the slide is not paused when video is playing because the variable isPlaying is in false value

Any thoughts about this issue that I have been encountered.

PS: If you have IE10 you can test IE8 by switching browser mode on it. Just press F12 and the browser debugging console will appear and then you can switch browser mode over there.

Thanks again 👍

[Mottie]

IE8 won't pause HTML5 video because IE8 doesn't support the video element (ref). If you want HTML5 video to work, you'll need a polyfill.

[josephca88]

@Mottie
Hi, well its not really HTML5 video having the issue but when it's in embed object. I've been using VideoJS as an api of my video tag so when I use HTML5 video it will work on lower version IE since the api converts it to an embed object so that the video can be played. I just thought that your plugin is working well with embed object but I found out it cause me an issue with IE8. (I'm not really wanted this to work properly with lower version IE but I'm considering it just in case some users are using lower version IE) :)

With this, I've tried to solved it by using or calling the isVideoPlaying callback and this force me to disable using the video extension of this plugin and apply what you have given into this FAQ page when using HTML5 video tag.

On the callback method I've coded this way:

isVideoPlaying : function(slider){
            var vid = slider.$currentPage.find('video'); // pause slideshow if video is playing
            var isPlaying = false;
            
            if (!vid.length) {
                isPlaying = !video.paused(); // Fix for below IE9 version.
            } else {
                isPlaying = (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
            }
            
            return isPlaying;
        },

wherein video variable is supplied with VideoJS object. With the code I've shown above is just a workaround of what I've said issue. I hope you do understand what am I talking about. :D

Looking forward on your response. Thanks 👍

[Mottie]

Hi @josephca88!

It looks like I might have to figure out some code to make it work with the VideoJS api. It shouldn't be too hard, but give me some time as I am busy today.

Also, I just realized that if you set the isVideoPlaying option in the core plugin, it will get overridden and ignored by the video extension. I'll have that fixed in the next update.

Thanks!

[josephca88]

@Mottie

Oh I see well I'm not in a hurry and my workaround seems to work fine as of now. Yeah you're right its overridden and I don't need to comment out the usage of video extension.

Well just take your time as of now.

Thanks

[Mottie]

@josephca88!

Here is the code to allow using the video-js library (demo):

HTML

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="320" height="240" data-setup="{}">
    <source src="http://css-tricks.github.io/AnythingSlider/demos/video/movie.ogg" type="video/ogg"/>
    <source src="http://css-tricks.github.io/AnythingSlider/demos/video/movie.mp4" type="video/mp4"/>
    <source src="http://css-tricks.github.io/AnythingSlider/demos/video/movie.webm" type="video/webm"/>
    Your browser does not support the video tag. But you could include an iframe/embeded video here.
</video>

Script

var myPlayer = {
    "example_video_1": _V_("example_video_1")
    // add more videos here
    // , "example_video_2": _V_("example_video_2")
};

// Set up AnythingSlider
$('#slider').anythingSlider({
    // pause all videos when changing slides
    onSlideInit: function (e, slider) {
        for (var vid in myPlayer) {
            myPlayer[vid].pause();
        }
    },
    // Only play a paused video when a slide comes into view
    onSlideComplete: function (slider) {
        // the video gets wrapped in a div with the same ID
        var video = slider.$currentPage.find('div.video-js'),
            vid = video.attr('id');
        // find video-js class name & check if paused
        if (video.length && myPlayer[vid] && myPlayer[vid].paused()) {
            myPlayer[vid].play();
        }
    },
    // return true if video is playing or false if not
    isVideoPlaying: function (slider) {
        var video = slider.$currentPage.find('div.video-js'),
            vid = video.attr('id');
        if (video.length && myPlayer[vid] && !myPlayer[vid].paused()) {
            return true;
        }
        return false;
    }
});

[sumitsabhnani]

anybody still facing this issue?
I was working with anything slider and it seemed to be working few days back but recently with youtube videos it is not working properly. Even though resumeOnVisible is true, video is continued to play in background and the slider also not pausing when youtube video is playing. However vimeo videos are working perfectly. (Don't know if this is due some recent changes in youtube API).
Can anybody please help on this?

[Mottie]

Hi @sumitsabhnani!

Are you using the latest version of the video extension? It should be version 1.5.1 beta. Other than that, I think I'd have to see the code or a demo of this issue so I can troubleshoot it better.

[sumitsabhnani]

Hi Mottie.. thanks for quick reply...
Yes I m using the latest version i.e.1.5.1 beta, it seems that youtube videos are not responsive at all. I mean the videos are started when the slideshow begins (it should start when the slide which contains video is visible) and if i have multiple videos on different slides they all are started at once. I am testing in my local environment, is it supposed to make any difference?
Let me know if you want to see some specific code snippet.
Thanks again. :)

[Mottie]

Ahh, yes, the API doesn't work when testing locally. It's a limitation put on by Adobe flash for security reasons. Test the page online (use dropbox or something like it if you have to).

[sumitsabhnani]

ok thanks Mottie for the help..
will check online if it is working fine and will disturb you again if not :P