diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js index df85b425646d1b9a0eae4f216ba3c00cae6dfdc8..d7964647a6a5b94c0539e3144a135a7c5af2dc6f 100644 --- a/src/react-components/home-root.js +++ b/src/react-components/home-root.js @@ -35,29 +35,20 @@ class HomeRoot extends Component { loadHomeVideo = () => { const videoEl = document.querySelector("#background-video"); - function initVideo() { - videoEl.playbackRate = 0.75; - videoEl.play(); - function toggleVideo() { - // Play the video if the window/tab is visible. - if (!("hasFocus" in document)) { - return; - } - if (document.hasFocus()) { - videoEl.play(); - } else { - videoEl.pause(); - } + videoEl.playbackRate = 0.75; + function toggleVideo() { + // Play the video if the window/tab is visible. + if (document.hasFocus()) { + videoEl.play(); + } else { + videoEl.pause(); } + } + if ("hasFocus" in document) { document.addEventListener("visibilitychange", toggleVideo); window.addEventListener("focus", toggleVideo); window.addEventListener("blur", toggleVideo); } - if (videoEl.readyState >= videoEl.HAVE_FUTURE_DATA) { - initVideo(); - } else { - videoEl.addEventListener("canplay", initVideo); - } }; showDialog = dialogType => { @@ -208,7 +199,7 @@ class HomeRoot extends Component { </div> </div> </div> - <video playsInline muted loop className="background-video" id="background-video"> + <video playsInline muted loop autoPlay className="background-video" id="background-video"> <source src={homeVideoWebM} type="video/webm" /> <source src={homeVideoMp4} type="video/mp4" /> </video>