diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index cc445ab4f..374a49431 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -66,6 +66,7 @@ export default React.memo(function VideoJs(props: Props) {
type: sourceType,
},
],
+ autoplay: false,
poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
plugins: { eventTracking: true },
};
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index a4ced1aaa..3fc4598bb 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -61,6 +61,9 @@ function VideoViewer(props: Props) {
const [isPlaying, setIsPlaying] = useState(false);
const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false);
const [isEndededEmbed, setIsEndededEmbed] = useState(false);
+
+ /* isLoading was designed to show loading screen on first play press, rather than completely black screen, but
+ breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
const [isLoading, setIsLoading] = useState(false);
const previousUri = usePrevious(uri);
@@ -101,7 +104,6 @@ function VideoViewer(props: Props) {
}
function onPlay() {
- console.log('on play!!!');
setIsLoading(false);
setIsPlaying(true);
setShowAutoplayCountdown(false);
@@ -113,9 +115,9 @@ function VideoViewer(props: Props) {
}
const onPlayerReady = useCallback(player => {
- console.log('on player ready!!!');
+ const shouldPlay = !embedded || autoplayIfEmbedded;
// https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
- if (autoplaySetting || autoplayIfEmbedded) {
+ if (shouldPlay) {
const promise = player.play();
if (promise !== undefined) {
promise
@@ -123,13 +125,14 @@ function VideoViewer(props: Props) {
// Autoplay started
})
.catch(function(error) {
+ setIsLoading(false);
setIsPlaying(false);
setPlayingUri(null);
});
}
}
- setIsLoading(!embedded); // if we are here outside of an embed, we're playing
+ setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing
player.on('tracking:buffered', doTrackingBuffered);
player.on('tracking:firstplay', doTrackingFirstPlay.bind(player));
player.on('ended', onEnded);
@@ -160,8 +163,8 @@ function VideoViewer(props: Props) {
{showAutoplayCountdown && }
{isEndededEmbed && }
{embedded && !isEndededEmbed && }
- {/* change message at any time */}
- {isLoading && }
+ {/* disable this loading behavior because it breaks when player.play() promise hangs */}
+ {false && isLoading && }