即使遵循其他指导，VideoSphere也不会在A-Frame中播放视频 [英] VideoSphere not playing video in A-Frame, even after following other guidance

问题描述

我正在研究A-Frame VR项目，并且在a-videophere元素上播放视频时出现问题。

I'm working on an A-Frame VR project and having issues getting video playback on the a-videophere element.

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

The guidelines I've followed: - Place playsinline or webkit-playsinline inside of video asset and include meta tag in head. - Load video source during window load, then use a button to start the playback. - I'm aware of the autoplay issues for video playing in mobile.

我已经四处寻找堆栈溢出来寻找解决方案，最新的解决方案我试过这里，所以请不要标记我重复的问题。这个问题中的JS甚至是对其他问题的修改。

I've looked around all over stack overflow to find solutions, the latest one I tried is here, so please don't flag me for duplicate question. The JS in this question is even a modification of that other question.

在你们开始撕开我的代码之前，请理解我已经尝试了几种方法。我已经做了腼腆和粘贴，修改过的解决方案以适合我的项目，想出了我自己的等等。这段代码确实在桌面上运行。当我使用标准的html视频标签和a-frame场景的OUTSIDE按钮时，它实际上将在手机上运行，​​但是只要我把它扔进场景并使用视频圈，就没有任何作用。

Before you guys start tearing my code apart, just understand that I've tried several methods. I've done coy and paste, modified solutions to fit my project, came up with my own, etc. This code does indeed run on desktop. It actual WILL run on mobile when I'm using standard html video tags and buttons OUTSIDE of the a-frame scene, but as soon as I throw it into the scene and use a videosphere, nothing works.

这是我的场景片段：

<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视频在移动浏览器中播放。问题是让他们在使用框架元素时玩游戏。

Again, the issue isn't with getting REGULAR html videos to play in a mobile browser. The issue is getting them to play while using a-frame elements.

推荐答案

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

Your milage may vary, but looks like if you set play from the component videoShere.components.material.material.map.image.play(); it helps (tested on Chrome on Pixel 1). I don't have an iPhone with me to test, but let me know how it goes.

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-Frame中播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！