new fix for prematurely autoplaying background videos
This commit is contained in:
		
							
								
								
									
										71
									
								
								js/reveal.js
									
									
									
									
									
								
							
							
						
						
									
										71
									
								
								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 ); | ||||
|  | ||||
| 						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 += '<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 | ||||
|   | ||||
		Reference in New Issue
	
	Block a user