How can I replace the video texture with another src?

Questions
,
1

I’m new with three,js, if it possible - help me, please :slight_smile:
i have videotexture with react-three-fiber

const [video] = useState(() => {
const vid = document.createElement(“video”)
vid.src = video_src.url_video
vid.load()
vid.crossOrigin = “Anonymous”
vid.loop = true
return vid
});

and

useEffect(() => void (ready_play &&video.play()), [ready_play, video])

and

<mesh scale={[1, 1.5, 1]} geometry={nodes.screen.geometry} position={[7.77, 4.54, -0.23]}>



Question: how i can change videotexture when i click next btn and receive new url video ( vid.src)?
Thanks
example(Reflector variant - CodeSandbox)

2

I suggest you call dispose() on the previous video texture and then create a new instance with the a new video element.

3

I’ve decided this way - to whom it may be of interest

  1. created an video element with useRef() <video src="/video.mp4" loop crossOrigin=“Anonymous” ref={video_ref} style={{ display: ‘none’}}/>
  2. then with useEffect src is available for manipulation
4

Does that mean the html-video-element shall be replaced by a new one,too?
So one is supposed to destroy the existing video-element and append a new one to the DOM!?
I am asking because I also try using another video for a video-texture after the video ends and it does not show on the video-plain even after disposing the texture and apllying a new one to the existing video-plain. On the belonging canvas where I get the 2D- context from the video is visible.