当检测到标记时如何加载或播放视频播放(HIRO) [英] How To Load Or Play Video Playback when the Marker is Detected (HIRO)
问题描述
我正在使用A-Frame.当图案或标记(HIRO)悬停在我的网络摄像头前时，我正在尝试增强视频(mp4)，应在标记上加载或播放视频.现在，此代码的问题是，在加载页面时，视频会自动播放而没有任何标记或图案(HIRO).视频显示在标记上.
I am using A-Frame. I am trying to augment a Video (mp4) when the pattern or marker (HIRO) is hovered in front of my webcam, the video should be loaded or played on the marker. Now The issue with this code is when the page gets loaded the video gets played automatically without any marker or pattern (HIRO). The video is displayed on the marker.
我只想在显示图案或标记时加载视频.没有p啪声，它不应该加载.请在这件事上给予我帮助 例如: AR中的视频播放 https://www.youtube.com/watch?v=jkcvfygpKiM&vl=zh-CN 标记上的视频增强
I just want to load the video whenever the pattern or marker is shown. Without patter, it should not load. Please help me with this Eg: Video playBack in AR https://www.youtube.com/watch?v=jkcvfygpKiM&vl=en Video Augmentation on Marker
<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>
推荐答案
由于autoplay属性的原因，它在加载时正在播放.另外，您还应该将video扔到资产.
要在标记可见时播放视频，请确保将视频保存在
<a-marker>节点之内，例如
Its playing when its loaded because of the autoplay attribute. Also you should throw the video to the assets.
To play the video when the marker is visible , make sure you have the video inside a
<a-marker> node like here.
<a-marker>
<a-video vidhandler></a-video>
</a-marker>
当您看到标记时-播放视频.
丢失标记后-暂停视频
When you see the marker - play the video.
Once you lose the marker - pause the video
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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
