A-Frame：如何在移动设备上播放视频的 a-scene 标签内添加一个按钮？答案

【问题标题】：A-Frame: How do I add a button INSIDE of the a-scene tags that plays video on mobile?A-Frame：如何在移动设备上播放视频的 a-scene 标签内添加一个按钮？
【发布时间】：2018-07-18 08:39:40
【问题描述】：

我创建了一个在场景中包含视频的 A-Frame 项目。该视频在桌面和移动设备上均按预期工作。我遇到的问题是，只有桌面版允许我在 a-scene 标签内有一个按钮来播放视频，而移动版只允许我在 a-scene 标签之外使用按钮，就像在 div 包装器中一样。加载和播放视频以及使用按钮的逻辑适用于桌面和移动设备，唯一的区别是当我将逻辑定位到 a-scene 标签内的按钮时。尽管我很感激视频正在移动设备上播放，但我真的很想在场景内有一个类似“VR”的按钮。到目前为止，在移动设备上工作的按钮更像是一个 VR 切换按钮，用于启动场景并开始播放视频。这不是我真正想要的行为。仅供参考，我在整个场景中使用相同类型的 a-image 按钮来切换实际图像和静态内容，它们工作得很好。似乎只是视频播放有问题。这个问题是我遇到的另一个问题（已解决）的后续问题，发现 here。

这适用于桌面，但不适用于移动设备：

<body>

 <a-scene>

  <a-assets>
   <img id="buttonImg" src="button.png">
   <video id="video" src="video.mp4" webkit-playsinline></video>
  </a-assets>

  <a-image id="playButton" src="#buttonImg"></a-image>

  <a-videosphere id="videoShere" loop="true" src="#video"></a-videoshpere>

 </a-scene>

</body>

这适用于桌面和移动设备：

<body>

 <div id="canvas">
  <div id="startButton">Play</div>
 </div>

 <a-scene>

  <a-assets>
   <img id="buttonImg" src="button.png">
   <video id="video" src="video.mp4" webkit-playsinline></video>
  </a-assets>

  <!--<a-image id="playButton" src="#buttonImg"></a-image>-->

  <a-videosphere id="videoShere" loop="true" src="#video"></a-videoshpere>

 </a-scene>

</body>

【问题讨论】：

标签： javascript video mobile aframe

【解决方案1】：

您仍然需要启动画面来在移动设备上启动视频，然后一旦触发（通过用户手势激活），您就可以应用 a-frame 事件来播放它。原因是 WebGL 事件不被视为用户操作，而是被视为 JS 触发事件。

Dom 对此问题的描述：

https://github.com/aframevr/aframe/issues/1463#issuecomment-308138947

问题在于 A-Frame 场景中的交互不算在内。浏览器无法判断 WebGL 内部发生了什么，因此它必须假设这些事件只是由任意 JS 生成的。您需要一个老式的物理触摸启动或单击事件，由用户的手指（或 Cardboard 按钮）触发，而不是由熔断器或凝视光标触发。游戏手柄按钮也可能算在内。不过，我不知道有这样的活生生的例子。

这是上一个可能有帮助的修改示例：当点击启动画面中的开始按钮时，它会播放，然后立即暂停视频以满足用户手势要求。

然后我向播放按钮（在 VR 场景内）添加了一个单击处理程序，它应该允许您播放视频。和以前一样，您的里程可能会因不同的浏览器而异。

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

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

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

    playButton.addEventListener('click', function() {
      playVideo();
    });

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

    function initVideo () {
      vid.play();
      vid.pause();
      videoShere.components.material.material.map.image.play();
      videoShere.components.material.material.map.image.pause();
    }

    function playVideo () {
      vid.play();
      videoShere.components.material.material.map.image.play();
    }
   })

【讨论】：

你已经完蛋了。再次感谢。我会尝试一下，让你知道它是怎么回事。我想这是有道理的。我永远不会想到有这么多的箍要跳过才能让它工作。似乎只需要故意加载整个场景才能让其他功能在移动设备上运行。在处理其他功能时，我会牢记这一点！
在 Android 和 iOS 上都像魅力一样工作！伙计，我已经为这个问题争论了好几天了！再次感谢！

【解决方案2】：

https://www.npmjs.com/package/aframe-gui

使用这个 npm。这是用于使用 a-frame 在场景中创建按钮。您可以使用此 npm 添加按钮。

【讨论】：

这很有趣。我不知道有一个 npm 选项。我会记住这一点，因为我在我使用的每个项目中都使用按钮。谢谢！
不客气。是的，这很有趣，我用过。