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会自动阻止所有类型媒体的播放，以减少数据消耗。视频只会加载到用户手势上，例如点击。

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

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

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

1 个答案: