From 360bc940062711db9b8020ce4e848f6c37014481 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 27 Apr 2017 18:49:20 +0200 Subject: [PATCH] new fix for prematurely autoplaying background videos --- js/reveal.js | 71 +++++++++++++++++++++++----------------------------- 1 file changed, 32 insertions(+), 39 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index f50994f..d3ba03c 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3054,6 +3054,13 @@ } + /** + * Called when the given slide is within the configured view + * distance. Shows the slide element and loads any content + * that is set to load lazily (data-src). + * + * @param {HTMLElement} slide Slide to show + */ /** * Called when the given slide is within the configured view * distance. Shows the slide element and loads any content @@ -3098,6 +3105,7 @@ // If the background contains media, load it if( background.hasAttribute( 'data-loaded' ) === false ) { + background.setAttribute( 'data-loaded', 'true' ); var backgroundImage = slide.getAttribute( 'data-background-image' ), backgroundVideo = slide.getAttribute( 'data-background-video' ), @@ -3107,43 +3115,38 @@ // Images if( backgroundImage ) { - background.style.backgroundImage = 'url('+ backgroundImage +')'; - background.setAttribute( 'data-loaded', 'true' ); - } // Videos else if ( backgroundVideo && !isSpeakerNotes() ) { + var video = document.createElement( 'video' ); - if( !isOverview() ) { - - var video = document.createElement( 'video' ); - video.setAttribute( 'autoplay', '' ); - video.setAttribute( 'playsinline', '' ); - - if( backgroundVideoLoop ) { - video.setAttribute( 'loop', '' ); - } - - if( backgroundVideoMuted ) { - video.muted = true; - } - - // Support comma separated lists of video sources - backgroundVideo.split( ',' ).forEach( function( source ) { - video.innerHTML += ''; - } ); - - background.appendChild( video ); - - background.setAttribute( 'data-loaded', 'true' ); - + if( backgroundVideoLoop ) { + video.setAttribute( 'loop', '' ); } + if( backgroundVideoMuted ) { + video.muted = true; + } + + // Inline video playback works (at least in Mobile Safari) as + // long as the video is muted and the `playsinline` attribute is + // present + if( isMobileDevice ) { + video.muted = true; + video.autoplay = true; + video.setAttribute( 'playsinline', '' ); + } + + // Support comma separated lists of video sources + backgroundVideo.split( ',' ).forEach( function( source ) { + video.innerHTML += ''; + } ); + + background.appendChild( video ); } // Iframes else if( backgroundIframe ) { - var iframe = document.createElement( 'iframe' ); iframe.setAttribute( 'allowfullscreen', '' ); iframe.setAttribute( 'mozallowfullscreen', '' ); @@ -3164,17 +3167,9 @@ iframe.style.maxWidth = '100%'; background.appendChild( iframe ); - - background.setAttribute( 'data-loaded', 'true' ); - } - else { - - background.setAttribute( 'data-loaded', 'true' ); - - } - } + } } @@ -3415,10 +3410,8 @@ * the targeted slide. * * @param {HTMLElement} element - * @param {boolean} autoplay Optionally override the - * autoplay setting of media elements */ - function stopEmbeddedContent( element, autoplay ) { + function stopEmbeddedContent( element ) { if( element && element.parentNode ) { // HTML5 media elements