HTML5 video autoplay function not working in fullpage.js

Question

my HTML5 video autoplay is not working.

<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">

I also tried without the ="true" value, and it doesn't work either. I've already used the same code in other sites and it worked just fine.

I'm using a framework based on fullPage.js, but i looked for something related on the files and didn't find anything.

The site is at http://agenciamilk.com/site/2/ if you wanna take a look. Thanks

Answer 1

You should use the afterRender callback the fullpage.js plugin offers.

afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

You can take a look at a live example here or you can even find it in the examples folder of the fullpage.js download.

And you can easily see the source code its using:

$(document).ready(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {

            //playing the video
            $('video').get(0).play();
        }
    });
});

UPDATE

This is no longer necessary in fullpage.js > 2.6.6. It will automatically play the video when accessing the section as far as it has the tag autoplay in it:

<video autoplay loop muted controls="false" id="myVideo">
    <source src="imgs/flowers.mp4" type="video/mp4">
    <source src="imgs/flowers.webm" type="video/webm">
</video>

In case you only want to play it on section load (not on page load) use data-autoplay. More info at the documentation.

Answer 2

Try autoplay="autoplay"

http://www.w3schools.com/tags/att_video_autoplay.asp

Mentions here in the "Differences Between HTML and XHTML" section.

Answer 3

Sorry I don't have enough rep to just comment yet. You tried:

autoplay="autoplay"

?

Answer 4

You can use the "isInViewport" plugin (linked below) to find out which video is currently in the viewport and execute some js code accordingly.

$(function () {
    $('#fullpage').fullpage({
        verticalCentered: true,
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        afterRender: function () {
            $('video').each(function () {
                if ($(this).is(":in-viewport")) {
                    $(this)[0].play();
                }
            }
    });
});

Bare in mind that looping through every video element is not the most efficient method to employ, but this should be enough to get you started.

jQuery plugin: isInViewport

Answer 5

Or you can just use autoplay property, something like

<video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
//----use just this one---^