Multiple videos autoplay in FullPage JS not working

I have already seen many answers on here and github (well addressed by Alvaro) on enabling video autoplay in FullPage.js

However I am having issues when I have several videos, each on a different slide, that need to autoplay by default. So far with this code I have been able to only auto start the first video:

afterRender: function () {
        //playing the video
        $('video').get(0).play();
    }

As far as I understand, this function needs to work in conjunction with afterSlideLoad for this to take place, but had no luck. Has anyone had experience with autoplaying several videos on different slides/pages?

Answers


If you have multiple videos you would need to loop through them to play them. Assumming you use jQuery in your page, this should do the trick:

afterRender: function () {
    $('video').each(function () {
        //playing the video
        $(this).get(0).play();
    });
}

If you want to play each of them disparately only when the slide loads, then you would need to use afterSlideLoad as you mention and probably assign an id tag to the video so you can play each of them whenever you want, for example:

<video autoplay loop muted controls="false" id="video1">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Notice the id="video1" in the video element. And now in the jQuery code:

afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
    //for section 2 slide 2
    if (index == 2 && slideIndex == 2) {

        //playing #video1
        $('#video1').each(function () {
            //playing the video
            $('video').get(0).play();
        });
    }
}

Need Your Help

Java Concurrency Issue when add an object to a list

java concurrency

I have a question which seems very strange, probably because my lack of some specific knowledge.

What HTML5 video event refers to the currentTime of the video being played?

javascript jquery html5 html5-video media-player

I want the user to have the option to skip the preroll ad after a specified time (say 5 secs into the ad). Then the normal video would play. How can I achieve this? Currently I have something inlin...