HTML5 auto play feature not working in fullpage.js

Question

my autostart HTML5 video does not work.

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

I also tried with no value = "true", and it does not work either. I already used the same code on other sites, and it worked fine.

I am using a framework based on fullPage.js, but I was looking for something related to files and didn't find anything.

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

Answer 1

You should use the afterRender , which offers the fullpage.js plugin.

afterRender ()
This callback starts immediately after creating the page structure. This is the callback you want to use to initialize other plugins or to run any code that requires the document to be ready (since this plugin modifies the DOM to create the resulting structure).

You can see a live example here or you can even find it in the examples folder fullpage.js downloads.

And you can easily see the source code using it:

 $(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 needed in fullpage.js> 2.6.6. It will automatically play the video when accessing the section, if it has an autoplay tag:

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

If you want to play it only when loading a section (not on page loading), use data-autoplay . More details in the documentation .

Answer 2

Try autoplay="autoplay"

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

Mentioned here in the section "Differences between HTML and XHTML."

Answer 3

Sorry, I don't have enough reputation to just comment. 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 the corresponding 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(); } } }); }); 

Remember that the cycle of each element of the video is not the most effective method to use, but this should be enough to get you started.

jQuery plugin: isInViewport

Answer 5

Or you can just use the autoplay property, something like

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