Hello, I am trying to pause/stop a video playing on a plane within an image target, once that image target is lost. The below code does not throw up errors, however it does not work and I never get the console.log to show ‘Image lost — resetting videoPlane material.’ PLEASE HELP!
import * as ecs from '@8thwall/ecs'
ecs.registerComponent({
name: 'PauseVideoOnExit',
schema: {
imageTarget: ecs.eid,
videoPlane: ecs.eid,
},
stateMachine: ({world, eid, schemaAttribute}) => {
let videoElement: HTMLVideoElement | null = null
return ecs.defineState('default')
.initial()
.onEnter(() => {
const {imageTarget, videoPlane} = schemaAttribute.get(eid)
if (!imageTarget || !videoPlane) {
console.warn('PauseVideoOnExit: Missing imageTarget or videoPlane.')
return
}
// Delay to allow material and texture to initialize
setTimeout(() => {
const videoPlaneObject = world.three.entityToObject.get(videoPlane)
if (!videoPlaneObject) {
console.warn('PauseVideoOnExit: No three.js object for videoPlane entity.')
return
}
const {material} = videoPlaneObject as any
if (!material) {
console.warn('PauseVideoOnExit: No material found on videoPlane object.')
return
}
const materials = Array.isArray(material) ? material : [material]
let foundVideoElement: HTMLVideoElement | null = null
for (const mat of materials) {
const texture = mat.map
const image = texture?.image
if (image instanceof HTMLVideoElement) {
foundVideoElement = image
break
} else {
console.log('PauseVideoOnExit: material.map.image is NOT a video element. Found:', image?.constructor?.name)
}
}
if (!foundVideoElement) {
console.warn('PauseVideoOnExit: No HTMLVideoElement found in any material map image.')
return
}
videoElement = foundVideoElement
world.events.addListener(imageTarget, 'xrimagelost', () => {
console.log('Image target lost — pausing and resetting video.')
if (videoElement && !videoElement.paused) {
videoElement.pause()
videoElement.currentTime = 0
}
})
}, 500) // Wait 0.5s to ensure texture has loaded
})
},
})
That’s what I’m here for.
