Is there a way to use one background video for multiple slides in Reveal.js? - reveal.js

Question

I am trying to create some slides using Reveal.js using a background video that spans multiple slides. I have no problems getting a background video to work on one slide using the data-background-video attribute
The following is the working snippet from the reveal.js documentation:
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop>
<h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided.</h2>
</section>
What I want however is for the video to be continuous even when I move to the next slide. If I put data-background-video in a "parent" , I can see the first frame of the video but it just freezes there
<section data-background-video="...">
<section><h1>slide 1</h1></section>
<section><h1>slide 2</h1></section>
<section><h1>slide 3</h1></section>
</section>
I want to use this as a backdrop for a performance where I want the lyrics overlaid on background video. I will switch background videos for for a certain part of the song but want the video to be the same while lines of the lyrics appear.

Answer 1

Here's a way to do this. Inside reveal.js modify the updateBackground() function:
Change the "if( currentBackground )" block from:
if( currentBackground ) {
// Start video playback
var currentVideo = currentBackground.querySelector( 'video' );
if( currentVideo ) {
var startVideo = function() {
currentVideo.currentTime = 0;
currentVideo.play();
currentVideo.removeEventListener( 'loadeddata', startVideo );
};
if( currentVideo.readyState > 1 ) {
startVideo();
}
else {
currentVideo.addEventListener( 'loadeddata', startVideo );
}
}
//................
}
to:
if( currentBackground ) {
// Start video playback
var currentVideo = currentBackground.querySelector( 'video' );
// This might be a nested node - check for parent video
if(!currentVideo) currentVideo = currentBackground.parentNode.querySelector( 'video' );
if( currentVideo ) {
var startVideo = function() {
//currentVideo.currentTime = 0;
currentVideo.play();
currentVideo.removeEventListener( 'loadeddata', startVideo );
};
if( currentVideo.readyState > 1 ) {
startVideo();
}
else {
currentVideo.addEventListener( 'loadeddata', startVideo );
}
}
//................
}
What I suggest is to search for video background in the parent node () as well and to resume it.

Answer 2

Just found this answer via google and it did not work. So I started to find my own solution and it seams to be quite simple. Just add this code below the "Reveal.initialize" command on the bottom of your index html (inside the script tag):
Reveal.addEventListener( 'slidechanged', function( event ) {
window.setTimeout(function(){
var stackedBackgrounds = $('body > div > div.backgrounds > div.stack');
stackedBackgrounds.each(function(){
var me = $(this);
var video = me.find('video').get(0);
console.log(video);
if(video){
if(me.hasClass('present')) {
console.log('play');
video.play();
}
else {
console.log('stop');
video.load();
}
}
});
}, 300);
} );
What does it do?
It registers the "slidechanged"-Event, waits another 300ms (because the event triggers too early). Then it finds all stacked backgrounds and starts the video if it is visible, otherwise it stops the video by reloading. That also sets the resume to position 0.
That all.
PS.: Of cause you can drop the console.log lines.