浏览代码

add autoPlayMedia config option, overrides individual autoplay settings

Hakim El Hattab 8 年之前
父节点
当前提交
a0a3b4f80d
共有 2 个文件被更改,包括 45 次插入14 次删除
  1. 15 3
      README.md
  2. 30 11
      js/reveal.js

+ 15 - 3
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

+ 30 - 11
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();
-		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,14 +3262,16 @@
 					return;
 					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 ) {
 					if( el.readyState > 1 ) {
 						startEmbeddedMedia( { target: el } );
 						startEmbeddedMedia( { target: el } );
@@ -3264,9 +3279,6 @@
 					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 ) {