Image Tracking and controlling a video

Technical Support
1

Hey,
so i was testing a few things in the last days. Whats the best way to make an image tracker that shows a video when tracked (with auto play and pause when not tracked), replay button and some buttons for links.

I saw the body.html app.js and so way which is in most 8thwall tutorials but thats not really the intended way for the studio? Also XRExtras isnt working in the studio so i need to write my own video controls ect? Any examples?

2

Hi, welcome to the forum!

Our Studio Image Target Sample Project has a Video space that shows how to play a Video using an Image Target.

Screenshot 2025-08-12 at 10.57.08 AM
Screenshot 2025-08-12 at 10.57.08 AM1054×799 130 KB

1 Like
3

Thank you that helped. Pause when not tracked is now working.

I encountered multiple problems with buttons and controlling the video.

I got a turn on and off button for the sound of the video (which works). When i add another button to reset the video to the beginning, it also turns of the sound/on.

Script:

Summary

import * as ecs from ‘@8thwall/ecs’

ecs.registerComponent({

name: ‘RepeatButton’,

schema: {

*// Entity ID of the video player with the VideoControls component*

videoPlayer: ecs.eid,

},

stateMachine: ({world, eid, schemaAttribute}) => {

ecs.defineState('default')

  .initial()

  .listen(eid, ecs.input.UI_CLICK, () => {

    const {videoPlayer} = schemaAttribute.get(eid)



    *// Reset the VideoControls component to its default state.*

    *// This will rewind the video to the beginning.*

    ecs.VideoControls.reset(world, videoPlayer)

  })

},

})

The second problem is that a button with transparent background and create a black background when i rotate the camera. Is that a known error on how to fix that?

grafik
grafik361×733 39.9 KB

4

It sounds like the first problem is related to the fact that a user gesture must be capture before a video with autoplay and audio is played. You might consider adding a Start Screen to your project so the browser can capture that initial tap as a gesture.

Can you land your changes and share the project with the support workspace so I take can a look into the second issue?

5

Yes, okay i can test it with the Start Screen. Just two buttons controlling the video with sound on and off and repeat (reset video to beginning). Will try that.

I added the support team and the project is called Testing Things…

Thank you for looking into it!

6

To the first point, i want to start it muted since most browsers dont allow autoplay then. Then there is a button to control the sound and then another button to reset the video to the beginning. Do i still need a start screen for that?

Its just that the reset button controls the sound too currently and i dont know why..

7

I’ve reviewed the project and looks like this is actually the expected behavior with the way your UI is laid out. To fix it you just need to re-build your UI so that all the elements are children of a parent 3D UI element instead of each being their own UI element.

You shouldn’t need a Start Screen as long as the videos start muted and the user has to do some action to un-mute them.

1 Like
8

Uhh so i build all the buttons as ui elements and parent them to the video, then it should work.

Will test it and report later. Thank you!

11

Sry for so many questions. The autoplay isnt working if the video has muted sound which usually works in aframe.

Is there a way to do that without adding a starting screen? Can i somehow add the muted playinline and such tag in the studio to the video so it can work?

EDIT: Deleted post which are now fixed and i understood the problem.
Last problem is the autoplay if possible.

12

I’m not sure that’s possible with the current Video Controls component but I’ll look into it for you.

1 Like