How to correctly display video on the MindAR Target #375
Replies: 6 comments 5 replies
-
|
Hello! Please tell me, have you found a solution to this problem? |
Beta Was this translation helpful? Give feedback.
-
|
https://hiukim.github.io/mind-ar-js-doc/examples/events-handling |
Beta Was this translation helpful? Give feedback.
-
|
` <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script> <script> const show = () => { document.querySelector("#video").play(); }
you can replay me if you are getting any error. |
Beta Was this translation helpful? Give feedback.
-
|
@vxedit Any solution? |
Beta Was this translation helpful? Give feedback.
-
|
Describe it in more detail , and if possible give a link for your code or paste it here . |
Beta Was this translation helpful? Give feedback.
-
|
All paths are correct and were adapted for this article, so this cannot be the error. |
Beta Was this translation helpful? Give feedback.
-
|
did you make a python server to make this work by entering the command , AFRAME.registerComponent('mytarget', { if nothing is working you can try adding that video on a-plane and use another video for its audio effect , by this you can also use mp4 with it , i have used chromakey as material for removing green screen ,
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much, everything worked great. I just re-wrote everything, I probably forgot something or wrote it wrong. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, i have nearly identical issue, but couldn't fix it. When I trigger on image target, the video pop up but doesnt play automaticly as I need, same for the background sound, i tried to convert video to gif and it's also doesnt play. Any suggestions? That's my HTML ` <title>KontiARApp</title>0+
That's my CSS `#loadingOverlay { #loadingOverlay.hidden { a-scene { That's my JS ` }); ` |
Beta Was this translation helpful? Give feedback.
-
|
This might help if using A-Frame: https://glitch.com/edit/#!/amcc-mind-ar-video I've also done this in threejs, you can use a video texture |
Beta Was this translation helpful? Give feedback.
-
|
Is this on iOS? iOS has several limitations on auto-playing videos - if the video has a sound track and/or the device is in low-power mode, videos won’t auto-play without user interaction (click). If the video has sound, try adding the following parameters to the video: "playsInline autoPlay muted”. The only way to deal with low-power mode is to request the user click - you should add an event listener for the error event and alert the user to click.
… On Aug 12, 2024, at 11:41 PM, Aliro Ronas ***@***.***> wrote:
Hello, i have nearly identical issue, but couldn't fix it. When I trigger on image target, the video pop up but doesnt play automaticly as I need, same for the background sound, i tried to convert video to gif and it's also doesnt play. Any suggestions?
<title>KontiARApp</title>
0+
<x-msg://4/videog.gif>
<a-entity mindar-image-target="targetIndex: 0">
<a-plane src="#myGif" position="0 0 0.1" height="0.7" width="0.7"></a-plane>
</a-entity>
<a-entity sound="src: #backgroundMusic;" position="0 0 0"></a-entity>
</a-scene>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script ***@***.***/dist/mindar-image-aframe.prod.js"></script>
<script src="app.js"></script>
/* style.css */
#loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 1);
z-index: 1000;
font-size: 3em;
}
#loadingOverlay.hidden {
display: none;
}
a-scene {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// app.js
window.addEventListener('load', () => {
const sceneEl = document.querySelector('a-scene');
const backgroundMusic = document.getElementById('backgroundMusic');
const loadingOverlay = document.getElementById('loadingOverlay');
const myGif = document.getElementById('myGif'); // Get the GIF element
// Hide overlay after 8 seconds
setTimeout(() => {
loadingOverlay.classList.add('hidden');
}, 8000);
sceneEl.addEventListener('mindARImageTrackingInitialized', () => {
console.log('Mind AR is ready!');
// Play background music
backgroundMusic.play();
// Hide the overlay
loadingOverlay.classList.add('hidden');
// Ensure GIF is visible (if you were hiding it initially)
myGif.style.display = 'block';
});
});
—
Reply to this email directly, view it on GitHub <#375 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIO2LZYSAO3ECEHQZL5HRLZRF573AVCNFSM6AAAAAAWVTXQFWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMZSGA4DINQ>.
You are receiving this because you are subscribed to this thread.
|
Beta Was this translation helpful? Give feedback.
-
Please help me. I can't get the video to display properly on the MindAR Target. It turns out that the video (and sound from the video) starts before the camera finds the target. How to make video start ONLY when camera finds target, and when camera loses target - video pauses. Also, I need it to be displayed correctly on Android and IOS.
Here's my code:
Beta Was this translation helpful? Give feedback.
All reactions