Question

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360 Video</title>
<meta name="description" content="360 Video — A-Frame">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/0.6.0/aframe.js"></script>
</head>

<body>
<a-scene>
  <a-assets>
    <video id="video" autoplay="true" src="textures/videoplayback.mp4" loop webkit-playsinline></video>
  </a-assets>
   <a-entity camera position="2 0 3" look-controls wasd-controls>
  <a-entity cursor="fuse: true; fuseTimeout: 1000"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
    <a-animation begin="click" easing="ease-in" attribute="scale"
                 fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                 fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
  </a-entity>
</a-entity>
  <a-video src="#video" rotation="0 180 0" width="15" height="7" position="0 0 -10"></a-video>
</a-scene>
</body>
</html>

这是我的代码。我希望VR中的手机播放视频显示。但它不起作用。它适用于笔记本电脑，但它不能在手机上工作。问题是什么？怎么能克服这个问题？

这是截图。它没有播放。

Answer 1

要在手机上播放视频，您需要用户手势来触发播放。即便如此，它仍然不是最可靠的，但是fwiw在这里似乎有用（在Pixel 1上的Chrome上测试）：

https://glitch.com/edit/#!/a-frame-video-tag-click-play

  document.addEventListener("DOMContentLoaded", function(event) {
    var scene = document.querySelector("a-scene");
    var vid = document.getElementById("video");
    var videoEl = document.getElementById("vidEl");

    if (scene.hasLoaded) {
      run();
    } else {
      scene.addEventListener("loaded", run);
    }

    function run () {
      if(AFRAME.utils.device.isMobile()) {
        document.querySelector('#splash').style.display = 'flex';
        document.querySelector('#splash').addEventListener('click', function () {
          playVideo();
          this.style.display = 'none';
        })
      } else {
          playVideo();
      }
    }

    function playVideo () {
      vid.play();
      if(AFRAME.utils.device.isMobile()) {
         videoEl.components.material.material.map.image.play(); 
      }
    }
  })

Answer 2

用以下代码替换您的视频链接代码：

<video id="video" autoplay="true" src="textures/videoplayback.mp4" loop webkit-playsinline playsinline></video>

..并确保你的＆＃39; src＆＃39;路径是正确的。

视频无法在手机中使用

2 个答案: