jan/revproxy-presentation
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

84
js/reveal.js
View file

@ -3060,11 +3060,20 @@
// Iframes // Iframes
else if( backgroundIframe ) { else if( backgroundIframe ) {
var iframe = document.createElement( 'iframe' ); 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.setAttribute( 'src', backgroundIframe );
iframe.style.width = '100%'; }
iframe.style.height = '100%';
iframe.style.maxHeight = '100%'; iframe.style.width = '100%';
iframe.style.maxWidth = '100%'; iframe.style.height = '100%';
iframe.style.maxHeight = '100%';
iframe.style.maxWidth = '100%';
background.appendChild( iframe ); background.appendChild( iframe );
} }
@ -3196,20 +3205,12 @@
if( autoplay && typeof el.play === 'function' ) { 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 ) { if( el.readyState > 1 ) {
_startVideo(); startEmbeddedMedia( { target: el } );
} }
else { 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 * "Starts" the content of an embedded iframe using the
* postMessage API. * postMessage API.
* *
* @param {object} event - postMessage API event * @param {object} event
*/ */
function startEmbeddedIframe( event ) { function startEmbeddedIframe( event ) {
@ -3253,19 +3274,26 @@
if( iframe && iframe.contentWindow ) { if( iframe && iframe.contentWindow ) {
var autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' ); 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
if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {
iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
}
// Vimeo postMessage API
else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {
iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
}
// Generic postMessage API
else {
iframe.contentWindow.postMessage( 'slide:start', '*' );
}
// YouTube postMessage API
if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {
iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
}
// Vimeo postMessage API
else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {
iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
}
// Generic postMessage API
else {
iframe.contentWindow.postMessage( 'slide:start', '*' );
} }
} }