<!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: 8M.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=“video_8M.mp4" loop="true" muted="true" playsinline></video>

</a-assets>


<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>


<a-entity 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>

// Este pequeño código obliga al vídeo a intentar arrancar

const video = document.querySelector('#miVideo');

const sceneEl = document.querySelector('a-scene');


sceneEl.addEventListener("targetFound", () => {

video.play();

});

</script>

</body>

</html>