即使遵循其他指导，视频界也没有在A框架中播放视频

Question

我正在研究一个A-Frame VR项目，并在A-Videophere元素上播放视频播放问题。

我遵循的指南： - 将PlayayInline或Webkit-PlaySinline放置在视频资产中，并在头部包含Meta标签。 - 在窗口加载期间加载视频源，然后使用按钮开始播放。 - 我知道在移动设备中播放视频的自动播放问题。

我环顾四周堆栈溢出以找到解决方案，我尝试过的最新解决方案是在这里，所以请不要为重复的问题标记我。这个问题中的JS甚至是对其他问题的修改。

你们开始将我的代码分开之前，请了解我尝试了几种方法。我已经完成了coy和粘贴的修改解决方案以适合我的项目，想出自己的项目等。此代码确实在桌面上运行。实际上，当我使用标准的HTML视频标签和A框架场景外的按钮时，它将在移动设备上运行，但是一旦我将其扔进现场并使用视频界面，就无济于事。

这是我场景的片段：

<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框架元素时播放。

Answer 1

您的里程可能会有所不同，但是看起来，如果您从组件videoShere.components.material.material.map.image.play();播放它会有所帮助(在像素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();
    }
  })