如何在检测到标记时加载或播放视频回放 (HIRO)

Question

我正在使用 A 型框架。当模式或标记 (HIRO) 悬停在我的网络摄像头前时，我正在尝试增强视频 (mp4)，应该在标记上加载或播放视频。现在，此代码的问题是当页面加载时，视频会自动播放，没有任何标记或模式 (HIRO)。视频显示在标记上。

我只想在显示图案或标记时加载视频。没有模式，它不应该加载。请在这件事上给予我帮助例如：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。

要在标记可见时播放视频，请确保视频位于 <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)

How To Load Or Play Video Playback when the Marker is Detected (HIRO)

html

javascript

jquery

augmented-reality

aframe