From 2219107c69189997289cfbcb3f76ba5ddff1ac51 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 29 Jan 2019 11:26:46 +0100 Subject: [PATCH] only force media controls to be visible when necessarry --- js/reveal.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index cee39e2..08ece7f 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3809,13 +3809,6 @@ _appendParamToIframeSource( 'src', 'player.vimeo.com/', 'api=1' ); _appendParamToIframeSource( 'data-src', 'player.vimeo.com/', 'api=1' ); - // Always show media controls on mobile devices - if( isMobileDevice ) { - toArray( dom.slides.querySelectorAll( 'video, audio' ) ).forEach( function( el ) { - el.controls = true; - } ); - } - } /** @@ -3859,7 +3852,20 @@ // Mobile devices never fire a loaded event so instead // of waiting, we initiate playback else if( isMobileDevice ) { - el.play(); + var promise = el.play(); + + // 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( function() { + el.controls = true; + + // Once the video does start playing, hide the controls again + el.addEventListener( 'play', function() { + el.controls = false; + } ); + } ); + } } // If the media isn't loaded, wait before playing else {