Anythingslider Html 5 Video Autoplay

please i need your help folks! I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just au

Solution 1:

Are you sure the video is not hidden behind another element? Play with the z-index as the video should be visible. I've had a few issues with this in the past, such as the video flickering in and out of visibility on scroll.

I ended up playing the videos in a light box since anything slider would leave the video playing as the carousel continued to scroll. Also, if you use an infinite scroller there were also issues with it playing the video in two places.

Providing you are using something like JW Player you will be able to set up some actions to pause the video on slide or similar but basic youtube embeds will be an issue.

Solution 2:

Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.

If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):

var playvid = function(slider) {
    var vid = slider.$currentPage.find('video');
    if (vid.length) {
        // autoplay
        vid[0].play();
    }
};

$('#slider').anythingSlider({

    // Autoplay video in initial panel, if one exists
    onInitialized: function(e, slider) {
        playvid(slider);
    },
    // 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();
        }
    },
    // play video
    onSlideComplete: function(slider) {
        playvid(slider);
    },
    // 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);
    }

});​