aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2017-01-17 13:19:10 +0100
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-01-17 13:19:10 +0100
commitf9e5467000c3b644f7d585081e1d2ad1e12fec85 (patch)
tree17917c11d4bcaea07d754f37630ab7de79064d9c
parenta38207f1d7a3f58710f03329b10cf7f50dedc098 (diff)
downloadperl-software-in-gnu-guix-f9e5467000c3b644f7d585081e1d2ad1e12fec85.tar
perl-software-in-gnu-guix-f9e5467000c3b644f7d585081e1d2ad1e12fec85.tar.gz
prevent autoplaying backgrounds from playing if slide is hidden
-rw-r--r--js/reveal.js84
1 files changed, 56 insertions, 28 deletions
diff --git a/js/reveal.js b/js/reveal.js
index 256cfd1..0caff7d 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3060,11 +3060,20 @@
// 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%';
- iframe.style.maxWidth = '100%';
+ }
+
+ iframe.style.width = '100%';
+ iframe.style.height = '100%';
+ iframe.style.maxHeight = '100%';
+ iframe.style.maxWidth = '100%';
background.appendChild( iframe );
}
@@ -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 );
}
}
@@ -3242,10 +3243,30 @@
}
/**
+ * 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,19 +3274,26 @@
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', '*' );
}
}