add autoPlayMedia config option, overrides individual autoplay settings

This commit is contained in:
Hakim El Hattab 2017-03-23 11:44:02 +01:00
parent 7e6fb9ec87
commit a0a3b4f80d
2 changed files with 45 additions and 14 deletions

View File

@ -228,6 +228,12 @@ Reveal.initialize({
// Flags if speaker notes should be visible to all viewers // Flags if speaker notes should be visible to all viewers
showNotes: false, 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 // Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten // next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides // by using a data-autoslide attribute on your slides
@ -789,20 +795,26 @@ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
Reveal.toggleOverview(); Reveal.toggleOverview();
``` ```
### Fullscreen mode ### Fullscreen mode
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit 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 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: Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
```html ```html
<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> <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 ### Stretching elements

View File

@ -105,6 +105,12 @@
// Flags if speaker notes should be visible to all viewers // Flags if speaker notes should be visible to all viewers
showNotes: false, 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 // Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten // next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides // by using a data-autoslide attribute on your slides
@ -2450,7 +2456,14 @@
updateNotes(); updateNotes();
formatEmbeddedContent(); formatEmbeddedContent();
startEmbeddedContent( currentSlide );
// Start or stop embedded content depending on global config
if( config.autoPlayMedia === false ) {
stopEmbeddedContent( currentSlide );
}
else {
startEmbeddedContent( currentSlide );
}
if( isOverview() ) { if( isOverview() ) {
layoutOverview(); layoutOverview();
@ -3249,24 +3262,23 @@
return; return;
} }
// Autoplay is always on for slide backgrounds // Prefer an explicit global autoplay setting
var autoplay = el.hasAttribute( 'data-autoplay' ) || var autoplay = config.autoPlayMedia;
el.hasAttribute( 'data-paused-by-reveal' ) ||
!!closestParent( el, '.slide-background' ); // 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' );
}
if( autoplay && typeof el.play === 'function' ) { if( autoplay && typeof el.play === 'function' ) {
el.removeAttribute( 'data-paused-by-reveal' );
if( el.readyState > 1 ) { if( el.readyState > 1 ) {
startEmbeddedMedia( { target: el } ); startEmbeddedMedia( { target: el } );
} }
else { else {
el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes
el.addEventListener( 'loadeddata', startEmbeddedMedia ); 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 ) { 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 // YouTube postMessage API
if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) { if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && autoplay ) {