From a1ed82ec10be4fbe5c1e5dc6574f02cf5948c1b4 Mon Sep 17 00:00:00 2001
From: Christopher Van Wiemeersch <hearcomestreble@gmail.com>
Date: Fri, 11 May 2018 00:26:10 -0700
Subject: [PATCH] fix autoplay background video on homepage for iOS
---
src/react-components/home-root.js | 29 ++++++++++-------------------
1 file changed, 10 insertions(+), 19 deletions(-)
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index df85b4256..d7964647a 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>
--
GitLab