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

Question

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

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

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

Answer 1

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

Dom对本期的描述：

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

The problem is that interaction within an A-Frame scene doesn't count. The browser can't tell what's going on inside WebGL, so it has to assume those events are just generated by arbitrary JS. You need an old-fashioned physical touchstart or click event, triggered by the user's finger (or Cardboard button) and not by a fuse or gaze cursor. Gamepad buttons might also count. I don't know of a live example of this though.

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

然后我向播放按钮（在 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();
    }
   })

Answer 2

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

使用这个 npm。这是为了使用框架在场景中创建按钮。你可以使用这个 npm 添加按钮。

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

A-Frame: How do I add a button INSIDE of the a-scene tags that plays video on mobile?

javascript

video

mobile

aframe