Background video does not play on the first slide loaded

[denehyg]

When the first slide loaded contains a background video the video does not play, eg load or refresh http://lab.hakim.se/reveal-js/#/10/3

This has been seen on the following browsers:

• Firefox on Mac OS X 10.10, Windows 7 and Linux
• IE11 on Windows 7

The video plays as expected when loaded from Chrome on Mac OS X.

When trying to debug this using breakpoints in Firefox the video does play, so I would assume this is related to the async loading of the video.

[alexbatista]

I had the the same problem, did you find any solutions for this?

[denehyg]

No. The workaround for my use case is to manually advance the slide set and go back as this triggers the video playback. Works fine when I'm giving the presentation, but not so well if I'm directing others to a link.

[alexbatista]

I think that i have a solution, is not good, but resolve the problem, if you can improve, please help me.

I did the following:

the error was in line 2616 i guess, where:
currentVideo.currentTime = 0;

probably the error occurs because the video was not loaded. Then, i change to this:

        var currentVideo = currentBackground.querySelector( 'video' );
        if( currentVideo ) {

            currentVideo.addEventListener("loadeddata", function() {
                currentVideo.currentTime = 0;
                currentVideo.play();
                loadeddata = true;
            });
            if(loadeddata === true){
                currentVideo.currentTime = 0;
                currentVideo.play();
            }
        }

I create a flag loadeddata for controller, i put on line 2548 above the declaration of the function updateBackground:
var loadeddata = false;
function updateBackground( includeAll ){
.....
}

In resume, i do this:

 var loadeddata = false; (line 2548)
function updateBackground( includeAll ){
    .....

     var currentVideo = currentBackground.querySelector( 'video' ); (line 2616)
        if( currentVideo ) {

            currentVideo.addEventListener("loadeddata", function() {
                currentVideo.currentTime = 0;
                currentVideo.play();
                loadeddata = true;
            });
            if(loadeddata === true){
                currentVideo.currentTime = 0;
                currentVideo.play();
            }
        }

   }

works fine on chrome and mozilla.

ps: sorry for my bad english, i am learning :)

about the event: https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata

[hakimel]

Fixed by @alexbatista in #1376