aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2017-04-27 18:49:20 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-04-27 18:49:20 +0200
commit360bc940062711db9b8020ce4e848f6c37014481 (patch)
tree2c4a9928e919906311e68e5095c5d318a81c3852 /js
parent9f4ed56bb3a3685c315ac162d4f77f755c2ec4d0 (diff)
downloadfosdem-2018-presentation-360bc940062711db9b8020ce4e848f6c37014481.tar
fosdem-2018-presentation-360bc940062711db9b8020ce4e848f6c37014481.tar.gz
new fix for prematurely autoplaying background videos
Diffstat (limited to 'js')
-rw-r--r--js/reveal.js67
1 files changed, 30 insertions, 37 deletions
diff --git a/js/reveal.js b/js/reveal.js
index f50994f..d3ba03c 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3061,6 +3061,13 @@
*
* @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
+ * that is set to load lazily (data-src).
+ *
+ * @param {HTMLElement} slide Slide to show
+ */
function showSlide( slide ) {
// Show the slide element
@@ -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