视频未在移动设备上呈现 - aframe

Question

我正在使用 aframe 和 angular-cli 构建一个项目，我在其中显示用于虚拟现实的 360° 视频。它在桌面上运行得非常好，但在移动设备上它不会呈现它并且 console 会打印以下不会出现在桌面上的警告：

尽管我使用的是 angular2，但我将脚本包含在 <head> 标记中，因为如果在组件中导入库则它不起作用。这是 html 文件的代码：

<a-scene auto-enter-vr>
  <a-assets>
    <video id="video" src="../../assets/videos/Ski+Jump-7k_encoded.mp4" autoplay loop playsinline webkit-playsinline muted></video>
  </a-assets>
  <a-videosphere src="#video" rotation="0 360 0"></a-videosphere>
</a-scene>

我查看了不同的来源，但我无法理解为什么视频无法呈现。你知道如何解决这个问题吗？预先感谢您的回复！

Answer 1

好吧chrome 自动阻止所有类型媒体的播放以减少数据消耗。视频只会根据用户手势加载，例如点击。

因此，要在框架上运行，我们必须在单击元素时加载视频。这最好通过单击 VR 护目镜图标来完成。这里有一些示例代码可以帮助您解决问题。

var VRButton = document.querySelector('.a-enter-vr-button');
VRButton.addEventListener('click',function(event){
    var video = document.querySelector('video');
    video.play();
});

视频未在移动设备上呈现 - aframe

Video is not rendered on mobile - aframe

html

angular

angular-cli

aframe

360-virtual-reality