xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

prevent autoplaying backgrounds from playing if slide is hidden

Browse Source
This commit is contained in:
Hakim El Hattab 2017-01-17 13:19:10 +01:00
parent a38207f1d7
commit f9e5467000
1 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
js/reveal.js
View File

@ -3060,7 +3060,16 @@
// Iframes
else if( backgroundIframe ) {
var iframe = document.createElement( 'iframe' );
// Only load autoplaying content when the slide is shown to
// avoid having it play in the background
if( /autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) {
iframe.setAttribute( 'data-src', backgroundIframe );
}
else {
iframe.setAttribute( 'src', backgroundIframe );
}
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.maxHeight = '100%';
@ -3196,20 +3205,12 @@
if( autoplay && typeof el.play === 'function' ) {
var _startVideo = function() {
// Only start playback if the containing slide is still visible
if( !!closestParent( el, '.present' ) ) {
el.currentTime = 0;
el.play();
}
el.removeEventListener( 'loadeddata', _startVideo );
};
if( el.readyState > 1 ) {
_startVideo();
startEmbeddedMedia( { target: el } );
}
else {
el.addEventListener( 'loadeddata', _startVideo );
el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes
el.addEventListener( 'loadeddata', startEmbeddedMedia );
}
}
@ -3241,11 +3242,31 @@
}
/**
* Starts playing an embedded video/audio element after
* it has finished loading.
*
* @param {object} event
*/
function startEmbeddedMedia( event ) {
var isAttachedToDOM = !!closestParent( event.target, 'html' ),
isVisible = !!closestParent( event.target, '.present' );
if( isAttachedToDOM && isVisible ) {
event.target.currentTime = 0;
event.target.play();
}
event.target.removeEventListener( 'loadeddata', startEmbeddedMedia );
}
/**
* "Starts" the content of an embedded iframe using the
* postMessage API.
*
* @param {object} event - postMessage API event
* @param {object} event
*/
function startEmbeddedIframe( event ) {
@ -3253,6 +3274,11 @@
if( iframe && iframe.contentWindow ) {
var isAttachedToDOM = !!closestParent( event.target, 'html' ),
isVisible = !!closestParent( event.target, '.present' );
if( isAttachedToDOM && isVisible ) {
var autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' );
// YouTube postMessage API
@ -3272,6 +3298,8 @@
}
}
/**
* Stop playback of any embedded content inside of
* the targeted slide.