3

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

4

3 回答 3

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>
于 2017-01-18T15:17:02.950 回答
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>
于 2016-08-08T21:06:49.517 回答
1

检查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 上，重命名为 just playsinline）
  • 将网页固定到 iOS 主屏幕。

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

  • 触发视频的用户交互（例如，听点击/点击）。您可以利用单击 Enter 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 最近宣布在下一个版本中支持内联视频，但我们将不得不等待看看效果如何。

于 2016-07-14T17:49:30.357 回答