diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index 22114d86b..1956bec2a 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/ui/component/viewers/videoViewer/view.jsx @@ -118,18 +118,25 @@ function VideoViewer(props: Props) { const shouldPlay = !embedded || autoplayIfEmbedded; // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection if (shouldPlay) { - const promise = player.play(); - if (promise !== undefined) { - promise - .then(function() { - // Autoplay started - }) - .catch(function(error) { - setIsLoading(false); - setIsPlaying(false); - setPlayingUri(null); - }); - } + const playPromise = player.play(); + const timeoutPromise = new Promise((resolve, reject) => { + setTimeout(() => reject('test'), 1000); + }); + + Promise.race([playPromise, timeoutPromise]).catch(error => { + if (error === 'test') { + // The player promise hung + // This is probably in firefox + // Try playing again, it works? + player.play(); + } else { + // Autoplay was actually blocked by the browser. + // Reset everything so the user sees the thumbnail/play button and can start it on their own + setIsLoading(false); + setIsPlaying(false); + } + console.log('error', error); + }); } setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing @@ -164,7 +171,7 @@ function VideoViewer(props: Props) { {isEndededEmbed && } {embedded && !isEndededEmbed && } {/* disable this loading behavior because it breaks when player.play() promise hangs */} - {false && isLoading && } + {isLoading && }