为什么我的视频或 videosphere 无法在 A-Frame VR 的移动设备上播放？答案

【问题标题】：Why is my video or videosphere not playing on mobile in A-Frame VR?为什么我的视频或 videosphere 无法在 A-Frame VR 的移动设备上播放？
【发布时间】：2016-11-17 18:24:19
【问题描述】：

我有一个带有视频或视频球的 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 中测试时，我只看到黑屏。它适用于桌面。

【问题讨论】：

标签： webvr aframe

【解决方案1】：

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

【讨论】：

【解决方案2】：

我在让 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>

【讨论】：

你能解释一下这是如何回答这个问题的吗？

【解决方案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 属性设置为 video 元素。（在 iOS 10 上，重命名为 playsinline）
将网页固定到 iOS 主屏幕。

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

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

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

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

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

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 最近宣布在下一版本中支持内嵌视频，但我们将不得不等待看看效果如何。

【讨论】：

这对我有用 M. Wassén（我的问题是视频和音频不能在 Chrome 上自动播放）。请在您的 videosphere src 属性中添加一个结束引号 - Stack Overflow 不允许我对 6 个字符以下的字符进行编辑，但这是唯一阻止这成为完美答案的原因:)