Question

我创建了一个A-Frame项目，里面有一个视频。该视频在桌面和移动设备中均可正常工作。我遇到的问题是只有桌面版本允许我在播放视频的a-scene标签中有一个按钮，而移动版本只允许我使用按钮，如果它是a-scene标签的OUTSIDE ，就像在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>

Answer 1

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

Dom对此问题的描述：

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

问题是A帧场景中的交互不计算在内。浏览器无法分辨WebGL中的内容，因此必须假设这些事件只是由任意JS生成的。您需要一个老式的物理触摸启动或点击事件，由用户的手指（或Cardboard按钮）触发，而不是由保险丝或注视光标触发。游戏手柄按钮也可能算在内。我不知道这个例子。

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

然后我在播放按钮（VR场景内）添加了一个点击处理程序，可让您播放视频。和以前一样，您的milage可能因不同的浏览器而异。

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标签内部按钮？

2 个答案: