new fix for prematurely autoplaying background videos

Author: hakimel

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 += '<source src="'+ source +'">';
-						} );
-
-						background.appendChild( video );
+					if( backgroundVideoLoop ) {
+						video.setAttribute( 'loop', '' );
+					}
 
-						background.setAttribute( 'data-loaded', 'true' );
+					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 += '<source src="'+ source +'">';
+					} );
+
+					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