in js/controllers/slidecontent.js [47:188]
load( slide, options = {} ) {
// Show the slide element
slide.style.display = this.Reveal.getConfig().display;
// Media elements with data-src attributes
queryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {
if( element.tagName !== 'IFRAME' || this.shouldPreload( element ) ) {
element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
element.setAttribute( 'data-lazy-loaded', '' );
element.removeAttribute( 'data-src' );
}
} );
// Media elements with <source> children
queryAll( slide, 'video, audio' ).forEach( media => {
let sources = 0;
queryAll( media, 'source[data-src]' ).forEach( source => {
source.setAttribute( 'src', source.getAttribute( 'data-src' ) );
source.removeAttribute( 'data-src' );
source.setAttribute( 'data-lazy-loaded', '' );
sources += 1;
} );
// Enable inline video playback in mobile Safari
if( isMobile && media.tagName === 'VIDEO' ) {
media.setAttribute( 'playsinline', '' );
}
// If we rewrote sources for this video/audio element, we need
// to manually tell it to load from its new origin
if( sources > 0 ) {
media.load();
}
} );
// Show the corresponding background element
let background = slide.slideBackgroundElement;
if( background ) {
background.style.display = 'block';
let backgroundContent = slide.slideBackgroundContentElement;
let backgroundIframe = slide.getAttribute( 'data-background-iframe' );
// If the background contains media, load it
if( background.hasAttribute( 'data-loaded' ) === false ) {
background.setAttribute( 'data-loaded', 'true' );
let backgroundImage = slide.getAttribute( 'data-background-image' ),
backgroundVideo = slide.getAttribute( 'data-background-video' ),
backgroundVideoLoop = slide.hasAttribute( 'data-background-video-loop' ),
backgroundVideoMuted = slide.hasAttribute( 'data-background-video-muted' );
// Images
if( backgroundImage ) {
// base64
if( /^data:/.test( backgroundImage.trim() ) ) {
backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
}
// URL(s)
else {
backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
// Decode URL(s) that are already encoded first
let decoded = decodeURI(background.trim());
return `url(${encodeRFC3986URI(decoded)})`;
}).join( ',' );
}
}
// Videos
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
let video = document.createElement( 'video' );
if( backgroundVideoLoop ) {
video.setAttribute( 'loop', '' );
}
if( backgroundVideoMuted ) {
video.muted = true;
}
// Enable inline playback in mobile Safari
//
// Mute is required for video to play when using
// swipe gestures to navigate since they don't
// count as direct user actions :'(
if( isMobile ) {
video.muted = true;
video.setAttribute( 'playsinline', '' );
}
// Support comma separated lists of video sources
backgroundVideo.split( ',' ).forEach( source => {
let type = getMimeTypeFromFile( source );
if( type ) {
video.innerHTML += `<source src="${source}" type="${type}">`;
}
else {
video.innerHTML += `<source src="${source}">`;
}
} );
backgroundContent.appendChild( video );
}
// Iframes
else if( backgroundIframe && options.excludeIframes !== true ) {
let iframe = document.createElement( 'iframe' );
iframe.setAttribute( 'allowfullscreen', '' );
iframe.setAttribute( 'mozallowfullscreen', '' );
iframe.setAttribute( 'webkitallowfullscreen', '' );
iframe.setAttribute( 'allow', 'autoplay' );
iframe.setAttribute( 'data-src', backgroundIframe );
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.maxHeight = '100%';
iframe.style.maxWidth = '100%';
backgroundContent.appendChild( iframe );
}
}
// Start loading preloadable iframes
let backgroundIframeElement = backgroundContent.querySelector( 'iframe[data-src]' );
if( backgroundIframeElement ) {
// Check if this iframe is eligible to be preloaded
if( this.shouldPreload( background ) && !/autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) {
if( backgroundIframeElement.getAttribute( 'src' ) !== backgroundIframe ) {
backgroundIframeElement.setAttribute( 'src', backgroundIframe );
}
}
}
}
this.layout( slide );
}