Question

I have several videos placed within AnythingSlider slides along with other content types in each. They play fine on all the browsers I have tested with the exception of iOS on an iPhone 3 and an iPhone 4. I am using the AnythingSlider Video Controller 1.3 beta (the one that still comes with the AnythingSlider 1.8.6 download).

If I take the jquery.anythingslider.video.js out of the equation, the video will play on iPhones. The problem is that without the video.js, any video placed inside a slider will continue to play even after clicking next/previous and advancing. Wouldn’t be such a drawback if the videos didn’t have audio (but some of mine do, so you still hear it when you are viewing completely different slides).

I tracked down the issue in the jquery.anythingslider.video.js with respect to the iOS crashes. It seems to happen because of the Flash handling used by this script. Anything using Flash, even when it’s part of a function in JS (or many times when it is only used as the fallback), seems to trip the iPhones.

My question is this: Is there a partial build of jquery.anythingslider.video.js that would only stop the video automatically on slide advance, while containing no Flash references so that it can still be used with iOS successfully?

Thanks for taking the time to read this and for any input you may have.

Answer 1

Hmm, I didn’t know about iOS crashing when attempting to access flash, I’ll have to look into that.

I’m not really sure what kind of video you are using, but if it is just HTML5 video, then the video wiki documentation has an example of how to control HTML5 video without the extension – demo

$('#slider').anythingSlider({
    // pause video when out of view
    onSlideInit: function(e, slider) {
        var vid = slider.$lastPage.find('video');
        if (vid.length && typeof(vid[0].pause) !== 'undefined') {
            vid[0].pause();
        }
    },
    // continue playing video if already started
    onSlideComplete: function(slider) {
        var vid = slider.$currentPage.find('video');
        if (vid.length && typeof(vid[0].pause) !== 'undefined' && vid[0].paused && vid[0].currentTime > 0 && !vid[0].ended) {
            vid[0].play();
        }
    },
    // pause slideshow if video is playing
    isVideoPlaying : function(slider){
        var vid = slider.$currentPage.find('video');
        return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended) ? true : false;
    }
});