From 5fdab3af76d44be9be94ad7aa7595a2137b89572 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Mon, 12 Mar 2018 17:21:59 -0700
Subject: [PATCH] Attempt fix for Safari on iOS
---
src/components/networked-video-player.css | 7 ++++---
src/components/networked-video-player.js | 4 +++-
2 files changed, 7 insertions(+), 4 deletions(-)
diff --git a/src/components/networked-video-player.css b/src/components/networked-video-player.css
index e68593958..93bbacfe8 100644
--- a/src/components/networked-video-player.css
+++ b/src/components/networked-video-player.css
@@ -1,12 +1,13 @@
:local(.video) {
- height: 100px;
+ /* 1x1px so that Safari on iOS allows us to autoplay the video */
+ width: 1px; height: 1px; /* toggle to show debug video elements */
background: black;
- margin: 5px;
}
:local(.container) {
position: absolute;
bottom: 0;
display: flex;
- visibility: hidden; /* toggle to show debug video elements */
+ /* 1x1px so that Safari on iOS allows us to autoplay the video */
+ width: 1px; height: 1px; /* toggle to show debug video elements */
}
diff --git a/src/components/networked-video-player.js b/src/components/networked-video-player.js
index 1f8b1da3e..a8c652642 100644
--- a/src/components/networked-video-player.js
+++ b/src/components/networked-video-player.js
@@ -32,10 +32,12 @@ AFRAME.registerComponent("networked-video-player", {
const v = document.createElement("video");
v.id = `nvp-video-${ownerId}`;
+ // muted and autoplay so that more restrictive browsers (e.g. Safari on iOS) will actually play the video.
+ v.muted = true;
+ v.autoplay = true;
v.classList.add(styles.video);
v.srcObject = new MediaStream(stream.getVideoTracks()); // We only want the video track so make a new MediaStream
container.appendChild(v);
- v.play();
this.videoEl = v;
--
GitLab