Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title>AR Video Simple</title> | |
| <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script> | |
| <style> | |
| body { margin: 0; overflow: hidden; } | |
| /* Nasconde il video sorgente dalla vista standard */ | |
| #vid { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <a-scene | |
| mindar-image="imageTargetSrc: targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no;" | |
| color-space="sRGB" | |
| renderer="colorManagement: true, physicallyCorrectLights" | |
| vr-mode-ui="enabled: false" | |
| device-orientation-permission-ui="enabled: false"> | |
| <a-assets> | |
| <video id="vid" src="./video.mp4" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video> | |
| </a-assets> | |
| <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> | |
| <a-entity id="example-target" mindar-image-target="targetIndex: 0"> | |
| <a-entity id="ar-video-plane" | |
| geometry="primitive: plane; width: 1.25; height: 1" | |
| material="src: #vid; shader: flat; transparent: true; opacity: 1" | |
| position="0 0 0"> | |
| </a-entity> | |
| </a-entity> | |
| </a-scene> | |
| <script> | |
| const video = document.querySelector("#vid"); | |
| const target = document.querySelector("#example-target"); | |
| // Quando il target viene trovato -> Play Video | |
| target.addEventListener("targetFound", () => { | |
| console.log("Target trovato: Play video"); | |
| video.play(); | |
| }); | |
| // Quando il target viene perso -> Pause Video | |
| target.addEventListener("targetLost", () => { | |
| console.log("Target perso: Pause video"); | |
| video.pause(); | |
| }); | |
| // FIX AUDIO: I browser moderni bloccano l'audio senza interazione utente. | |
| // Cliccando ovunque sullo schermo, sblocchiamo l'audio del video. | |
| document.body.addEventListener('click', () => { | |
| if(video.muted) { | |
| video.muted = false; | |
| console.log("Audio attivato tramite tocco utente"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |