add autoPlayMedia config option, overrides individual autoplay settings
This commit is contained in:
		
							
								
								
									
										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 ) { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user