即使遵循其他指導，VideoSphere也無法在A-Frame中播放視頻

Question

我正在進行A-Frame VR項目，但在a-videophere元素上獲取視頻播放時遇到問題。

我遵循的准則：-將playsinline或webkit-playsinline放置在視頻資產中，並在頭部添加meta標簽。 -在窗口加載期間加載視頻源，然后使用按鈕開始播放。 -我知道在手機中播放視頻時自動播放的問題。

我到處都在堆棧溢出中尋找解決方案，我嘗試過的最新解決方案是在這里 ，所以請不要為重復的問題標記我。 這個問題中的JS甚至是對該另一個問題的修改。

在你們開始分解我的代碼之前，請了解我已經嘗試了幾種方法。 我已經完成了粘貼和粘貼工作，修改了解決方案以適合我的項目，提出了自己的解決方案，等等。此代碼確實可以在桌面上運行。 當我在使用A幀場景的外部使用標准html視頻標簽和按鈕時，它實際上將在移動設備上運行，但是當我將其扔到場景中並使用videosphere時，它什么也不會起作用。

這是我的場景片段：

<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>

同樣，問題不在於讓REGULAR html視頻在移動瀏覽器中播放。 問題是讓它們在使用A幀元素時可以播放。

Answer 1

您的里程數可能會有所不同，但是如果您從分量videoShere.components.material.material.map.image.play();設置播放，則效果似乎一樣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();
    }
  })