fix videos not autoplaying when using control arrows in android

Update `display` config to support `!important` flag.

examples/media.html

@@ -33,10 +33,10 @@
 
 				<section>
 					<h2>Video</h2>
-					<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
+					<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-autoplay></video>
 				</section>
 
-				<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
+				<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
 					<h2>Background Video</h2>
 				</section>
 

js/controllers/controls.js

@@ -83,9 +83,10 @@ export default class Controls {
 		let pointerEvents = [ 'touchstart', 'click' ];
 
 		// Only support touch for Android, fixes double navigations in
-		// stock browser
+		// stock browser. Use touchend for it to be considered a valid
+		// user interaction (so we're allowed to autoplay media).
 		if( isAndroid ) {
-			pointerEvents = [ 'touchstart' ];
+			pointerEvents = [ 'touchend' ];
 		}
 
 		pointerEvents.forEach( eventName => {
@@ -102,7 +103,7 @@ export default class Controls {
 
 	unbind() {
 
-		[ 'touchstart', 'click' ].forEach( eventName => {
+		[ 'touchstart', 'touchend', 'click' ].forEach( eventName => {
 			this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );
 			this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );
 			this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );

js/controllers/slidecontent.js

@@ -9,11 +9,14 @@ import fitty from 'fitty';
  */
 export default class SlideContent {
 
+	allowedToPlay = true;
+
 	constructor( Reveal ) {
 
 		this.Reveal = Reveal;
 
 		this.startEmbeddedIframe = this.startEmbeddedIframe.bind( this );
+		this.ensureMobileMediaPlaying = this.ensureMobileMediaPlaying.bind( this );
 
 	}
 
@@ -51,7 +54,13 @@ export default class SlideContent {
 	load( slide, options = {} ) {
 
 		// Show the slide element
-		slide.style.display = this.Reveal.getConfig().display;
+		const displayValue = this.Reveal.getConfig().display;
+		if( displayValue.includes('!important') ) {
+			const value = displayValue.replace(/\s*!important\s*$/, '').trim();
+			slide.style.setProperty('display', value, 'important');
+		} else {
+			slide.style.display = displayValue;
+		}
 
 		// Media elements with data-src attributes
 		queryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {
@@ -320,10 +329,16 @@ export default class SlideContent {
 					else if( isMobile ) {
 						let promise = el.play();
 
+						el.addEventListener( 'canplay', this.ensureMobileMediaPlaying );
+
 						// If autoplay does not work, ensure that the controls are visible so
 						// that the viewer can start the media on their own
 						if( promise && typeof promise.catch === 'function' && el.controls === false ) {
-							promise.catch( () => {
+							promise
+							.then( () => {
+								this.allowedToPlay = true;
+							})
+							.catch( () => {
 								el.controls = true;
 
 								// Once the video does start playing, hide the controls again
@@ -374,6 +389,40 @@ export default class SlideContent {
 
 	}
 
+	/**
+	 * Ensure that an HTMLMediaElement is playing on mobile devices.
+	 *
+	 * This is a workaround for a bug in mobile Safari where
+	 * the media fails to display if many videos are started
+	 * at the same moment. When this happens, Mobile Safari
+	 * reports the video is playing, and the current time
+	 * advances, but nothing is visible.
+	 *
+	 * @param {Event} event
+	 */
+	ensureMobileMediaPlaying( event ) {
+
+		const el = event.target;
+
+		// Ignore this check incompatible browsers
+		if( typeof el.getVideoPlaybackQuality !== 'function' ) {
+			return;
+		}
+
+		setTimeout( () => {
+
+			const playing = el.paused === false;
+			const totalFrames = el.getVideoPlaybackQuality().totalVideoFrames;
+
+			if( playing && totalFrames === 0 ) {
+				el.load();
+				el.play();
+			}
+
+		}, 1000 );
+
+	}
+
 	/**
 	 * Starts playing an embedded video/audio element after
 	 * it has finished loading.
@@ -389,7 +438,19 @@ export default class SlideContent {
 			// Don't restart if media is already playing
 			if( event.target.paused || event.target.ended ) {
 				event.target.currentTime = 0;
-				event.target.play();
+				const promise = event.target.play();
+
+				if( promise && typeof promise.catch === 'function' ) {
+					promise
+						.then( () => {
+							this.allowedToPlay = true;
+						} )
+						.catch( ( error ) => {
+							if( error.name === 'NotAllowedError' ) {
+								this.allowedToPlay = false;
+							}
+						} );
+				}
 			}
 		}
 
@@ -461,6 +522,10 @@ export default class SlideContent {
 				if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {
 					el.setAttribute('data-paused-by-reveal', '');
 					el.pause();
+
+					if( isMobile ) {
+						el.removeEventListener( 'canplay', this.ensureMobileMediaPlaying );
+					}
 				}
 			} );
 
@@ -497,4 +562,15 @@ export default class SlideContent {
 
 	}
 
+	/**
+	 * Checks whether media playback is blocked by the browser. This
+	 * typically happens when media playback is initiated without a
+	 * direct user interaction.
+	 */
+	isNotAllowedToPlay() {
+
+		return !this.allowedToPlay;
+
+	}
+
 }

js/controllers/touch.js

@@ -216,6 +216,14 @@ export default class Touch {
 	 */
 	onTouchEnd( event ) {
 
+		// Media playback is only allowed as a direct result of a
+		// user interaction. Some mobile devices do not consider a
+		// 'touchmove' to be a direct user action. If this is the
+		// case, we fall back to starting playback here instead.
+		if( this.touchCaptured && this.Reveal.slideContent.isNotAllowedToPlay() ) {
+			this.Reveal.startEmbeddedContent( this.Reveal.getCurrentSlide() );
+		}
+
 		this.touchCaptured = false;
 
 	}

js/reveal.js

@@ -394,7 +394,7 @@ export default function( revealElement, options ) {
 
 		// Text node
 		if( node.nodeType === 3 ) {
-			text += node.textContent;
+			text += node.textContent.trim();
 		}
 		// Element node
 		else if( node.nodeType === 1 ) {
@@ -403,10 +403,25 @@ export default function( revealElement, options ) {
 			let isDisplayHidden = window.getComputedStyle( node )['display'] === 'none';
 			if( isAriaHidden !== 'true' && !isDisplayHidden ) {
 
+				// Capture alt text from img and video elements
+				if( node.tagName === 'IMG' || node.tagName === 'VIDEO' ) {
+					let altText = node.getAttribute( 'alt' );
+					if( altText ) {
+						text += ensurePunctuation( altText );
+					}
+				}
+
 				Array.from( node.childNodes ).forEach( child => {
 					text += getStatusText( child );
 				} );
 
+				// Add period after block-level text elements to improve
+				// screen reader experience
+				const textElements = ['P', 'DIV', 'UL', 'OL', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE'];
+				if( textElements.includes( node.tagName ) && text.trim() !== '' ) {
+					text = ensurePunctuation( text );
+				}
+
 			}
 
 		}
@@ -417,6 +432,22 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Ensures text ends with proper punctuation by adding a period
+	 * if it doesn't already end with punctuation.
+	 */
+	function ensurePunctuation( text ) {
+
+		const trimmedText = text.trim();
+
+		if( trimmedText === '' ) {
+			return text;
+		}
+
+		return !/[.!?]$/.test(trimmedText) ? trimmedText + '.' : trimmedText;
+
+	}
+
 	/**
 	 * This is an unfortunate necessity. Some actions – such as
 	 * an input field being focused in an iframe or using the