bg videos remain muted on mobile, otherwise broken when navigating wi…

…th swipe gestures
hakimel · Jun 16, 2020 · 9ff27cf · 9ff27cf
1 parent 2fccb77
commit 9ff27cf
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/examples/media.html b/examples/media.html
@@ -36,7 +36,7 @@ <h2>Video</h2>
 					<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
 				</section>
 
-				<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-background-video-muted>
+				<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
 					<h2>Background Video</h2>
 				</section>
 
@@ -68,7 +68,7 @@ <h2>Audio with controls</h2>
 
 		<script src="../dist/reveal.js"></script>
 		<script>
-			Reveal.initialize();
+			Reveal.initialize({hash: true});
 		</script>
 
 	</body>

diff --git a/js/controllers/slidecontent.js b/js/controllers/slidecontent.js
@@ -117,7 +117,12 @@ export default class SlideContent {
 					}
 
 					// Enable inline playback in mobile Safari
+					//
+					// Mute is required for video to play when using
+					// swipe gestures to navigate since they don't
+					// count as direct user actions :'(
 					if( isMobile ) {
+						video.muted = true;
 						video.setAttribute( 'playsinline', '' );
 					}