admin管理员组文章数量:1434893
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.
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 ;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=".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/ponent-anchor.js"></script>
<script src="aframe_lib/ponent-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>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.
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./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/ponent-anchor.js"></script>
<script src="aframe_lib/ponent-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>- 1 Possible duplicate of How to detect when marker is found in AR.js – Piotr Adam Milewski Commented Jul 16, 2018 at 15:11
- 1 No, Actually the issue is while augmenting video, I am not able to play the video on marker – Aryan Commented Jul 18, 2018 at 13:00
1 Answer
Reset to default 2Its 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();
}
}
});
本文标签： javascriptHow To Load Or Play Video Playback when the Marker is Detected (HIRO)Stack Overflow
版权声明：本文标题：javascript - How To Load Or Play Video Playback when the Marker is Detected (HIRO) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745638709a2667721.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论