new fix for prematurely autoplaying background videos
This commit is contained in:
parent
9f4ed56bb3
commit
360bc94006
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
|
* Called when the given slide is within the configured view
|
||||||
* distance. Shows the slide element and loads any content
|
* distance. Shows the slide element and loads any content
|
||||||
|
@ -3098,6 +3105,7 @@
|
||||||
|
|
||||||
// If the background contains media, load it
|
// If the background contains media, load it
|
||||||
if( background.hasAttribute( 'data-loaded' ) === false ) {
|
if( background.hasAttribute( 'data-loaded' ) === false ) {
|
||||||
|
background.setAttribute( 'data-loaded', 'true' );
|
||||||
|
|
||||||
var backgroundImage = slide.getAttribute( 'data-background-image' ),
|
var backgroundImage = slide.getAttribute( 'data-background-image' ),
|
||||||
backgroundVideo = slide.getAttribute( 'data-background-video' ),
|
backgroundVideo = slide.getAttribute( 'data-background-video' ),
|
||||||
|
@ -3107,43 +3115,38 @@
|
||||||
|
|
||||||
// Images
|
// Images
|
||||||
if( backgroundImage ) {
|
if( backgroundImage ) {
|
||||||
|
|
||||||
background.style.backgroundImage = 'url('+ backgroundImage +')';
|
background.style.backgroundImage = 'url('+ backgroundImage +')';
|
||||||
background.setAttribute( 'data-loaded', 'true' );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
// Videos
|
// Videos
|
||||||
else if ( backgroundVideo && !isSpeakerNotes() ) {
|
else if ( backgroundVideo && !isSpeakerNotes() ) {
|
||||||
|
var video = document.createElement( 'video' );
|
||||||
|
|
||||||
if( !isOverview() ) {
|
if( backgroundVideoLoop ) {
|
||||||
|
video.setAttribute( 'loop', '' );
|
||||||
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( 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
|
// Iframes
|
||||||
else if( backgroundIframe ) {
|
else if( backgroundIframe ) {
|
||||||
|
|
||||||
var iframe = document.createElement( 'iframe' );
|
var iframe = document.createElement( 'iframe' );
|
||||||
iframe.setAttribute( 'allowfullscreen', '' );
|
iframe.setAttribute( 'allowfullscreen', '' );
|
||||||
iframe.setAttribute( 'mozallowfullscreen', '' );
|
iframe.setAttribute( 'mozallowfullscreen', '' );
|
||||||
|
@ -3164,17 +3167,9 @@
|
||||||
iframe.style.maxWidth = '100%';
|
iframe.style.maxWidth = '100%';
|
||||||
|
|
||||||
background.appendChild( iframe );
|
background.appendChild( iframe );
|
||||||
|
|
||||||
background.setAttribute( 'data-loaded', 'true' );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
|
|
||||||
background.setAttribute( 'data-loaded', 'true' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3415,10 +3410,8 @@
|
||||||
* the targeted slide.
|
* the targeted slide.
|
||||||
*
|
*
|
||||||
* @param {HTMLElement} element
|
* @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 ) {
|
if( element && element.parentNode ) {
|
||||||
// HTML5 media elements
|
// HTML5 media elements
|
||||||
|
|
Loading…
Reference in New Issue