handle playback of background video when page loses focus (fixes issue #310)

src/react-components/home-root.js

@@ -30,9 +30,39 @@ class HomeRoot extends Component {
   componentDidMount() {
     this.loadEnvironments();
     this.setState({ dialogType: this.props.dialogType });
-    document.querySelector("#background-video").playbackRate = 0.75;
+    this.loadHomeVideo();
   }
 
+  loadHomeVideo = () => {
+    const videoEl = document.querySelector("#background-video");
+    function initVideo() {
+      videoEl.playbackRate = 0.75;
+      videoEl.play();
+      let inIframe = false;
+      try {
+        inIframe = !!window.frameElement || window.self !== window.top;
+      } catch (e) {
+        inIframe = false;
+      }
+      function toggleVideo() {
+        // Play the video if the window/tab is visible (or is within an `<iframe>`).
+        if (document.hasFocus() || inIframe) {
+          videoEl.play();
+        } else {
+          videoEl.pause();
+        }
+      }
+      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 => {
     return e => {
       e.preventDefault();
@@ -181,7 +211,7 @@ class HomeRoot extends Component {
               </div>
             </div>
           </div>
-          <video playsInline autoPlay muted loop className="background-video" id="background-video">
+          <video playsInline muted loop className="background-video" id="background-video">
             <source src={homeVideoWebM} type="video/webm" />
             <source src={homeVideoMp4} type="video/mp4" />
           </video>