aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2017-03-23 11:44:02 +0100
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-03-23 11:44:02 +0100
commita0a3b4f80da716f041ba6ba071ca0c2900404f52 (patch)
treefde84fdd49915d37c77b967f336558de21532526
parent7e6fb9ec87f10f4cc379240fc5824925ebf2bff3 (diff)
downloadfosdem-2018-presentation-a0a3b4f80da716f041ba6ba071ca0c2900404f52.tar
fosdem-2018-presentation-a0a3b4f80da716f041ba6ba071ca0c2900404f52.tar.gz
add autoPlayMedia config option, overrides individual autoplay settings
-rw-r--r--README.md18
-rw-r--r--js/reveal.js41
2 files changed, 45 insertions, 14 deletions
diff --git a/README.md b/README.md
index 789a8fa..8e31935 100644
--- a/README.md
+++ b/README.md
@@ -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 ) {