AFRAME.registerComponent('vidhandler', {
init: function () {
var marker = this.el
var videoEl = document.querySelector("#video");
marker.addEventListener('markerFound', function() {
var markerId = marker.id;
console.log('markerFound', markerId);
videoEl.play();
});
marker.addEventListener('markerLost', function() {
var markerId = marker.id;
console.log('markerLost', markerId);
videoEl.pause();
});
}
});
<a-scene embedded arjs='trackingMethod: best; patternRatio: 0.8; debugUIEnabled: false;' hidden>
<a-assets>
<a-assets-item id="video" src="assets/video/orangebw.mp4"></a-assets-item>
</a-assets>
<a-marker emitevents="true" id="marker" type="pattern" url="assets/markers/tagmarker.patt" vidhandler>
<a-plane id="vid" src="#video" rotation="-90 0 0" width="1.6" height="0.8"></a-plane>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
在加载页面之前,在检测到标记之前,视频中的声音就会开始播放。视频确实会在检测到标记时显示,但即使丢失了标记,视频的声音仍会继续播放。我希望视频在检测到标记时播放,在丢失标记时暂停。