<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene mindar-image="imageTargetSrc: ./targets/targets.mind; uiScanning: no; filterMinCF: 0.00001; filterBeta: 0.0001; missTolerance: 1000;"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets>
<video id="miVideo" src="GoEnhance_8M.mp4" loop="true" muted="true" playsinline></video>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity id="target" mindar-image-target="targetIndex: 0">
<a-video src="#miVideo" width="1.1" height="1.56" position="0 0 0.01" scale="1 1 1"></a-video>
</a-entity>
</a-scene>
<script>
const video = document.querySelector('#miVideo');
const target = document.querySelector('#target');
target.addEventListener("targetFound", () => {
video.play();
});
</script>
</body>
</html>