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

Thorpe

autoplay="autoplay" instead of "true". – Wellfounded

i tried both autoplay="autoplay" and just autoplay and it's still not working... – Thorpe

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.

Gosport

Thanks, that worked partially. The thing is, i'm bulding a page with 3 different "slides", each one with a different video background. So now, only the first video is autoplaying. Do i have to change something on that afterRender callback to allow multiple videos? – Thorpe

Then you should use the afterSlideLoad callback as well to play the video of the loaded slide. – Gosport

actually i meant sections, not slides... anyway, i checked the callback page on github and now i trying something like this: $(document).ready(function () { $('#fullpage').fullpage({ verticalCentered: true, anchors: ['Page1', 'Page2', 'Page3', 'Page4'], sectionsColor: ['#000000', '#1eacd7', '#e0382d', '#1eacd7'], afterRender: function () { //playing the video $('video').get(0).play(); }, afterLoad: function(Page2,2){ if(index == '2'){ $('video').get(0).play(); } } }); }); – Thorpe

The last comment got messy, and had some mistakes. I'm trying this and it's still not working: $(document).ready(function () { $('#fullpage').fullpage({ afterRender: function () { //playing the video $('video').get(0).play(); }, afterLoad: function(anchorLink, index){ //using index if(index == '2'){ $('video').get(0).play(); } //using anchorLink if(anchorLink == 'Page2'){ $('video').get(0).play(); } } }); – Thorpe

sorry @Gosport i´m pretty new at this, i can't seem to make fiddle work as i wanted... I just needed an example of how i can put multiple autoplay videos in different pages using fullpage.js – Thorpe

using the callbacks afterLoad for sections or afterSlideLoad for slides. – Gosport

Answer 2

Try autoplay="autoplay"

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

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

Evers

Answer 3

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

autoplay="autoplay"

?

Anything

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

Infusive

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---^

Heterogamy