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

【问题标题】：Video is not rendered on mobile - aframe视频未在移动设备上呈现 - aframe
【发布时间】：2017-02-08 15:36:48
【问题描述】：

我正在使用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>

我查看了不同的来源，但我无法理解视频未呈现的原因。你知道如何解决这个问题吗？提前感谢您的回复！

【问题讨论】：

什么类型的移动设备？见：github.com/aframevr/aframe/issues/1846
我在不同的设备上测试过：iPhone 6、Galaxy s6 和 Galaxy s5

标签： html angular angular-cli aframe 360-virtual-reality

【解决方案1】：

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

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

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

【讨论】：

非常感谢，我已经成功模拟了一次点击OnInit()，现在它可以正常工作了
很高兴能帮上忙