Question

我正在使用A-Frame。当图案或标记（HIRO）悬停在我的网络摄像头前时，我试图增强视频（mp4），应在标记上加载或播放视频。现在，此代码的问题是，在加载页面时，视频会自动播放而没有任何标记或图案（HIRO）。视频显示在标记上。

我只想在显示图案或标记时加载视频。没有p啪声，它不应该加载。请在这件事上给予我帮助例如：Video playBack in AR https://www.youtube.com/watch?v=jkcvfygpKiM&vl=en 标记上的视频增强

<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<!-- include for artoolkit trackingBackend -->
<script src='aframe_lib/artoolkit.min.js'></script>
<script src='aframe_lib/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='aframe_lib/svd.js'></script>
<script src='aframe_lib/posit1.js'></script>
<script src='aframe_lib/cv.js'></script>
<script src='aframe_lib/aruco.js'></script>
<script src='aframe_lib/threex-arucocontext.js'></script>
<script src='aframe_lib/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='aframe_lib/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='aframe_lib/signals.min.js'></script>
<script src='aframe_lib/threex-artoolkitprofile.js'></script>
<script src='aframe_lib/threex-artoolkitsource.js'></script>
<script src='aframe_lib/threex-artoolkitcontext.js'></script>
<script src='aframe_lib/threex-arbasecontrols.js'></script>
<script src='aframe_lib/threex-armarkercontrols.js'></script>
<script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
<script src='aframe_lib/threex-hittesting-plane.js'></script>
<script src='aframe_lib/threex-hittesting-tango.js'></script>
<script src='aframe_lib/threex-armarkerhelper.js'></script>
<script src='aframe_lib/arjs-utils.js'></script>
<script src='aframe_lib/arjs-session.js'></script>
<script src='aframe_lib/arjs-anchor.js'></script>
<script src='aframe_lib/arjs-hittesting.js'></script>
<script src='aframe_lib/arjs-tangovideomesh.js'></script>
<script src='aframe_lib/arjs-tangopointcloud.js'></script>
<script src='aframe_lib/arjs-debugui.js'></script>
<script src='aframe_lib/threex-armultimarkerutils.js'></script>
<script src='aframe_lib/threex-armultimarkercontrols.js'></script>
<script src='aframe_lib/threex-armultimarkerlearning.js'></script>
<!-- include aframe-ar.js -->
<script src="aframe_lib/system-arjs.js"></script>
<script src="aframe_lib/component-anchor.js"></script>
<script src="aframe_lib/component-hit-testing.js"></script>
<!-- start the body of your page -->

<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs='trackingMethod: best;'>
    <a-anchor hit-testing-enabled='true'>
      <a-entity>
        <video type="video/mp4" id="penguin-sledding" autoplay="true" loop="false" src="resources/video.mp4" webkit-playsinline>
         </a-entity>
         <a-video  position="0 0.2 0" src="#penguin-sledding" rotation="90 180 0"></a-video>
      </a-anchor>
      <a-camera-static preset='hiro'/>
      <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible="">
      </a-entity>
   </a-scene>
</body>

Answer 1

由于autoplay属性，它在加载时正在播放。另外，您应该将video扔到assets。

要在标记可见时播放视频，请确保将视频放在here之类的<a-marker>节点中。

<a-marker>
    <a-video vidhandler></a-video>
</a-marker>

看到标记时-播放视频。
丢失标记后-暂停视频

AFRAME.registerComponent('vidhandler', {
  init: function () {
    this.toggle = false;
    document.querySelector("#vid").pause(); //reference to the video
  },
  tick:function(){  
   if(document.querySelector("a-marker").object3D.visible == true){
     if(!this.toggle){
       this.toggle = true;
       document.querySelector("#vid").play();
     }
   }else{
     this.toggle = false;
     document.querySelector("#vid").pause();
   }
  }
});

当检测到标记时如何加载或播放视频播放（HIRO）

1 个答案: