diff --git a/src/components/networked-video-player.css b/src/components/networked-video-player.css index e6859395801b79bddc37c85c53a92e6a1780c8ec..00dd3a89730b18ba210d2b981c0929399c3f1902 100644 --- a/src/components/networked-video-player.css +++ b/src/components/networked-video-player.css @@ -1,12 +1,11 @@ :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 */ + width: 10px; height: 10px; /* toggle to show debug video elements */ } diff --git a/src/components/networked-video-player.js b/src/components/networked-video-player.js index 1f8b1da3e5bb007d817b9a8b9379f0c88c06ccdb..03cfba4f6d7a835ac825804724a4109d16690cdb 100644 --- a/src/components/networked-video-player.js +++ b/src/components/networked-video-player.js @@ -32,6 +32,10 @@ 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.playsInline = 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);