diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-03-23 11:44:02 +0100 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-03-23 11:44:02 +0100 |
commit | a0a3b4f80da716f041ba6ba071ca0c2900404f52 (patch) | |
tree | fde84fdd49915d37c77b967f336558de21532526 | |
parent | 7e6fb9ec87f10f4cc379240fc5824925ebf2bff3 (diff) | |
download | fosdem-2018-presentation-a0a3b4f80da716f041ba6ba071ca0c2900404f52.tar fosdem-2018-presentation-a0a3b4f80da716f041ba6ba071ca0c2900404f52.tar.gz |
add autoPlayMedia config option, overrides individual autoplay settings
-rw-r--r-- | README.md | 18 | ||||
-rw-r--r-- | js/reveal.js | 41 |
2 files changed, 45 insertions, 14 deletions
@@ -228,6 +228,12 @@ Reveal.initialize({ // Flags if speaker notes should be visible to all viewers showNotes: false, + // Global override for autolaying embedded media (video/audio/iframe) + // - null: Media will only autoplay if data-autoplay is present + // - true: All media will autoplay, regardless of individual setting + // - false: No media will autoplay, regardless of individual setting + autoPlayMedia: null, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides @@ -789,20 +795,26 @@ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } ); Reveal.toggleOverview(); ``` + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. ### Embedded media -Embedded HTML5 `<video>`/`<audio>` and YouTube iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute. - Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown: ```html <video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> ``` -Additionally the framework automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to all iframes, ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden. +If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay. + +Note that embedded HTML5 `<video>`/`<audio>` and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute. + + +### Embedded iframes + +reveal.js automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to embedded iframes. ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden. ### Stretching elements diff --git a/js/reveal.js b/js/reveal.js index 3267465..4e4bf24 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -105,6 +105,12 @@ // Flags if speaker notes should be visible to all viewers showNotes: false, + // Global override for autolaying embedded media (video/audio/iframe) + // - null: Media will only autoplay if data-autoplay is present + // - true: All media will autoplay, regardless of individual setting + // - false: No media will autoplay, regardless of individual setting + autoPlayMedia: null, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides @@ -2450,7 +2456,14 @@ updateNotes(); formatEmbeddedContent(); - startEmbeddedContent( currentSlide ); + + // Start or stop embedded content depending on global config + if( config.autoPlayMedia === false ) { + stopEmbeddedContent( currentSlide ); + } + else { + startEmbeddedContent( currentSlide ); + } if( isOverview() ) { layoutOverview(); @@ -3249,14 +3262,16 @@ return; } - // Autoplay is always on for slide backgrounds - var autoplay = el.hasAttribute( 'data-autoplay' ) || - el.hasAttribute( 'data-paused-by-reveal' ) || - !!closestParent( el, '.slide-background' ); + // Prefer an explicit global autoplay setting + var autoplay = config.autoPlayMedia; - if( autoplay && typeof el.play === 'function' ) { + // If no global setting is available, fall back on the element's + // own autoplay setting + if( typeof autoplay !== 'boolean' ) { + autoplay = el.hasAttribute( 'data-autoplay' ) || !!closestParent( el, '.slide-background' ); + } - el.removeAttribute( 'data-paused-by-reveal' ); + if( autoplay && typeof el.play === 'function' ) { if( el.readyState > 1 ) { startEmbeddedMedia( { target: el } ); @@ -3264,9 +3279,6 @@ else { el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes el.addEventListener( 'loadeddata', startEmbeddedMedia ); - - // `loadeddata` never fires unless we start playing on iPad - if( /ipad/gi.test( UA ) ) el.play(); } } @@ -3335,7 +3347,14 @@ if( isAttachedToDOM && isVisible ) { - var autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' ); + // Prefer an explicit global autoplay setting + var autoplay = config.autoPlayMedia; + + // If no global setting is available, fall back on the element's + // own autoplay setting + if( typeof autoplay !== 'boolean' ) { + autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' ); + } // YouTube postMessage API if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) { |