为什么我的视频或 videosphere 不能在 A-Frame VR 中在移动设备上播放？

Question

我有一个带有视频或视频球的 A 帧场景：

<a-scene>
  <a-assets>
    <video id="video" src="anothervideo.mp4></video>
  </a-assets>
  <a-video src="myvideo.mp4></a-video>
  <a-videosphere src="#video></a-videosphere>
</a-scene>

当我在 iOS 或 Android 中测试时，我只看到黑屏。它适用于桌面。

Answer 1

勾选https://aframe.io/faq/#why-does-my-video-not-play-on-mobile

iOS Safari documentation on video limitations: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1

移动浏览器在显示内联视频方面存在限制。 2D 移动网络不太适合播放内联视频。由于 iOS 平台限制，为了获得内联视频（带或不带自动播放），我们必须：

设置元标记（由 A-Frame 完成）。
将 webkit-playsinline 属性设置为视频元素。（在 iOS 10 上，重命名为 playsinline）
将网页固定到 iOS 主屏幕。

在某些 Android 设备或浏览器上：

触发视频的用户互动（例如，收听 tap/click）。您可以利用点击进入 VR 按钮。

对于所有这些步骤，您应该向用户提供说明和 UI 以了解播放移动视频的必要步骤（固定到主屏幕，点击）。

我们将尝试提供一个完整的示例来解决这些情况。

他们还记录了一次只能播放一个视频，format/codecs:

Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs.

iOS Safari 最近宣布在下一版本中支持内联视频，但我们还得等着看效果如何。

Answer 2

谈到利用 Enter VR 按钮，尝试：

<a-scene>
<a-assets>
  <video id="video" src="anothervideo.mp4"></video>
</a-assets>
<a-video class="video" src="myvideo.mp4"></a-video>
<a-videosphere class="video" src="#video></a-videosphere>
</a-scene>

<script>
  function playVideo () {
    var els = document.querySelectorAll('.video')
    Array.prototype.slice.call(els).forEach(function(el) {
      el.components.material.material.map.image.play()
    })
  }

  document.querySelector('.a-enter-vr-button').addEventListener('click', playVideo)
</script>

Answer 3

我在让 Enter VR 按钮触发视频方面遇到了一些困难（不幸的是蛋黄酱的解决方案没有让我做到这一点），但最终拼凑了这个成功的脚本：

<a-scene>
<a-assets>
  <video id="video" src="anothervideo.mp4"></video>
</a-assets>
<a-videosphere src="#video"></a-videosphere>
</a-scene>

<script type="text/javascript">
    var scene = document.querySelector("a-scene");
    var vid = document.getElementById("video");

    if (scene.hasLoaded) {
      run();
    } else {
      scene.addEventListener("loaded", run);
    }

    function run () {
        scene.querySelector(".a-enter-vr-button").addEventListener("click", function(e){
            console.log("VR Mode entered");
            this.style.display = "none";
            vid.play();
        }, false);
    }
</script>

为什么我的视频或 videosphere 不能在 A-Frame VR 中在移动设备上播放？

Why is my video or videosphere not playing on mobile in A-Frame VR?

webvr

aframe