6

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

Alvaro
  • 40,778
  • 30
  • 164
  • 336
Filipe Teixeira
  • 65
  • 1
  • 1
  • 4

5 Answers5

9

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.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • 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? – Filipe Teixeira Aug 22 '14 at 15:27
  • Then you should use the `afterSlideLoad` callback as well to play the video of the loaded slide. – Alvaro Aug 22 '14 at 17:04
  • 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(); } } }); });` – Filipe Teixeira Aug 22 '14 at 17:34
  • 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(); } } });` – Filipe Teixeira Aug 22 '14 at 19:16
  • sorry @Alvaro 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 – Filipe Teixeira Aug 26 '14 at 14:57
  • using the callbacks `afterLoad` for sections or `afterSlideLoad` for slides. – Alvaro Aug 26 '14 at 14:59
1

Try autoplay="autoplay"

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

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

Devin H.
  • 1,065
  • 1
  • 11
  • 19
1

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

autoplay="autoplay"

?

M.Bush
  • 1,102
  • 1
  • 12
  • 22
1

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

CalisZA
  • 11
  • 1
0

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---^
Suman Bogati
  • 6,289
  • 1
  • 23
  • 34