A框架:如何在Mobile上播放视频的A场景标签中添加一个按钮

我已经创建了一个A型项目，该项目在场景中有一个视频。该视频在台式机和移动设备中都按预期工作。我遇到的问题是，只有桌面版本才能在播放视频的A场景标签中具有一个按钮，而移动版本仅允许我使用一个按钮，如果它在A-Scene标签之外，就像在Div包装纸中一样。加载和播放视频和工作的逻辑该按钮在桌面和移动设备上都起作用，唯一的区别是，当我将逻辑定位到A-Scene标签内部的按钮时。我很感激视频在移动设备上播放，我真的很想在场景内有一个" VR"按钮。截至目前，在移动设备上工作的按钮更像是启动场景并启动视频的VR切换按钮。这并不是我要追求的所需行为。仅供参考，我在整个场景中都使用相同类型的A图像按钮来切换实际的图像和静态内容，并且它们运行良好。似乎在视频播放方面存在问题。这个问题是我(解决(的另一个问题的后续，此处找到。

这在桌面上工作，但不使用移动设备：

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

您仍然需要启动屏幕才能在移动设备上启动视频，然后触发它(通过用户手势激活(您可以应用A型事件进行播放。原因是WebGL事件不被视为用户操作，而是像JS触发的事件一样对待。

dom的描述来自此问题：

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

问题在于，A框架场景中的互动不计数。浏览器无法分辨WebGL内部发生了什么，因此必须假设这些事件只是由任意JS生成的。您需要由用户的手指(或纸板按钮(而不是保险丝或凝视光标触发的老式物理接触或单击事件。GamePad按钮也可能很重要。我不知道这个现场例子。

这是最后一个可能有帮助的修改示例：当单击"飞溅"屏幕中的开始按钮时，它将播放，然后立即暂停视频以满足用户的手势要求。

然后，我在播放按钮(在VR场景内(中添加了一个点击处理程序，该按钮应该允许您播放视频。像以前一样，您的里程可能会随不同的浏览器而变化。

https://glitch.com/edit/# ！/a-frame-video-click-play-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();
    }
   })

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

使用此NPM。这是用于使用A框架在场景中创建按钮。您可以使用此NPM添加按钮。

相关内容

最新更新

热门标签：