Grow your CSS skills. Land your dream job.

Anythingslider html 5 video autoplay

  • # September 5, 2012 at 11:42 am

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

    # September 5, 2012 at 3:21 pm

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

    });​
    # December 28, 2012 at 4:39 am

    @mottie :

    i want to ask about your script what you post, that script added anywhere ? or where ?

    please help me :D
    thx

    # January 3, 2013 at 2:16 pm

    @redzase Well, the code I shared above should be added into the head of the page. But ideally, it should be added to an external file along with all the other code used on your page.

    Also, the code above should be wrapped inside of a document ready function: `jQuery(function($){ … });`

    # March 4, 2013 at 3:53 am

    @mottie
    Works perfectly fine! One question though.. Can I make the Anythingslider move to the next panel when the video is finished?

    # March 4, 2013 at 8:54 am

    Hi @centrumkanalen!

    It doesn’t check if the video is playing unless the slideshow is active. So just set the AnythingSlider option `autoPlay` to `true`.

    # March 10, 2014 at 11:01 pm

    @mottie

    In the video options – can I stop the audio and start the audio from the beginning once I return to the slide as suppose to play from where it paused?

    Many thanks!!

    # March 11, 2014 at 6:58 pm

    @daveolsan It should be possible. I can’t give you a solution unless I know what kind of audio you are playing, or basically what code is needed to start, stop, resume, etc the audio.

    # March 12, 2014 at 1:44 am

    @mottie I am using the exact code you have posted on SEPTEMBER 5 above – but I have no video files, I have mp3 audio on each slide. Autoplay setup – the file is embedded inside the video tag. All is fine but when you return to a visited slide the audio starts to play from where you left it. The requirement is for the audio to start from the beginning. (ie. you are on slide1, you listen to the audio for 30 sec, you go slide2, return to slide1 and audio resumes from 30s but I need it to start from the beginning – I hope it makes sense :)

    # March 12, 2014 at 3:41 am

    Since this is clearly a JS issue, I’ll move this over to the correct area.

    # March 12, 2014 at 5:34 am

    @daveolsan Change the playvid function to this (demo):

    var playvid = function(slider) {
        var vid = slider.$currentPage.find('video');
        if (vid.length) {
            // always start from the beginning
            vid[0].currentTime = 0;
            // autoplay
            vid[0].play();
        }
    };
    
    # March 15, 2014 at 6:57 am

    That solved my issue. Thank you so much mottie.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".