0

我正在构建一个项目，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>

我查看了不同的来源，但我无法理解为什么视频没有渲染。你知道如何解决这个问题吗？提前感谢您的回复！

4

1 回答 1

2

Well chrome 会自动阻止各种媒体的播放以减少数据消耗。视频只会在用户手势上加载，例如 click 。

因此，为了在 aframe 上工作，我们必须在点击元素时加载视频。这最好通过点击 VR 护目镜图标 来完成。这里有一些示例代码可以帮助您。

var VRButton = document.querySelector('.a-enter-vr-button');
VRButton.addEventListener('click',function(event){
    var video = document.querySelector('video');
    video.play();
});
于 2017-02-08T17:50:23.033 回答