VideoSphere 不在 A 帧中播放视频，即使遵循了其他指导也是如此

Question

我正在从事 A-Frame VR 项目，但在 a-videophere 元素上播放视频时遇到问题。

我遵循的准则： - 将 playsinline 或 webkit-playsinline 放在视频资产内，并在 head 中包含元标记。 - 在 window 加载期间加载视频源，然后使用按钮开始播放。 - 我知道在移动设备上播放视频的自动播放问题。

我查看了整个堆栈溢出以寻找解决方案，我尝试的最新解决方案是，所以请不要标记我重复的问题。这个问题中的 JS 甚至是对另一个问题的修改。

在你们开始拆解我的代码之前，请了解我已经尝试了几种方法。我做过含糊其辞的粘贴、修改解决方案以适合我的项目、想出我自己的等等。此代码在桌面上确实运行。当我在 a 帧场景之外使用标准 html 视频标签和按钮时，它实际上会运行在移动设备上，但是一旦我将它放入场景并使用视频球，就没有任何效果.

这是我的场景片段：

<a-scene>    

<a-assets>
    <video id="video" src="Videos/video.mp4" webkit-playsinline></video>
</a-assets>

    <a-image id="playButton" src="#buttonImg">
        <a-text value="PLAY" position="-.23 0 0" scale=".8 .8 1"></a-text>
    </a-image>

<a-videosphere id="videoShere" loop="true" src="#video" rotation="0 -90 0"></a-videosphere>

</a-scene>

<script>
      var scene = document.querySelector("a-scene");
      var vid = document.getElementById("video");

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

      function run () {
          scene.querySelector("#playButton").addEventListener("click", function(e){
              vid.play();
          });
      }
</script>

同样，问题不在于让 html 视频在移动浏览器中播放。问题是让他们在使用 a-frame 元素的同时进行游戏。

Answer 1

您的里程可能会有所不同，但看起来如果您从组件 videoShere.components.material.material.map.image.play(); 设置播放它会有所帮助（在 Pixel 1 的 Chrome 上测试）。我没有 iPhone 来测试，但让我知道它是怎么回事。

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

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

    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();
      videoShere.components.material.material.map.image.play();
    }
  })

VideoSphere 不在 A 帧中播放视频，即使遵循了其他指导也是如此

VideoSphere not playing video in A-Frame, even after following other guidance

javascript

video

mobile

webvr

aframe