Question

我有一个带视频或视频的A-Frame场景：

<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

说到利用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 2

我努力让Enter VR按钮触发视频（mayognaise的解决方案，但遗憾的是没有让我在那里），但最终拼凑了这个诀窍的脚本：

<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>

Answer 3

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

关于视频限制的iOS Safari文档：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设备或浏览器上：

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

通过所有这些步骤，您应该向用户提供说明和用户界面，以获取播放移动视频的必要步骤（引脚到主屏幕，点击）。

我们将尝试提供一个完整的例子来解决这些问题。

他们还记录了一次只能播放一个视频，并且格式/编解码器有限制：

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最近宣布支持下一版本的内嵌视频，但我们不得不等待看看它是如何发挥作用的。

为什么我的视频或视频电影在A-Frame VR中无法在手机上播放？

3 个答案: