add autoPlayMedia config option, overrides individual autoplay settings
This commit is contained in:
parent
7e6fb9ec87
commit
a0a3b4f80d
18
README.md
18
README.md
|
@ -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
|
||||||
|
|
39
js/reveal.js
39
js/reveal.js
|
@ -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();
|
||||||
|
|
||||||
|
// Start or stop embedded content depending on global config
|
||||||
|
if( config.autoPlayMedia === false ) {
|
||||||
|
stopEmbeddedContent( currentSlide );
|
||||||
|
}
|
||||||
|
else {
|
||||||
startEmbeddedContent( currentSlide );
|
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 ) {
|
||||||
|
|
Loading…
Reference in New Issue