VideoTexture rendering but frozen

Hello there. For learning purpose I’m working on a project where I decided to introduce a videoTexture as texture for my TV mesh, in order to render a video on it (thought it would be cool).
I’ll start saying that I have been working with three.js for less than a month,so this could totally be a school boy error.
This being said, here it is my code:

 videoTexture = new THREE.VideoTexture( video );

videoTexture.minFilter = THREE.LinearFilter;

videoTexture.magFilter = THREE.LinearFilter;

videoTexture.format = THREE.RGBFormat;

boundingBoxTV = new Physijs.BoxMesh( new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({map : videoTexture}), 0 );

boundingBoxTV.material.visible = true;

boundingBoxTV.receiveShadow = true;

boundingBoxTV.castShadow = true;




While in my html file I have a simple:
< video id=“video”>
< source src=“MyVideo.mp4” type=“video/mp4”>
< /video>

What I get is the following:

And it’s frozen at the very first frame of the video.

In the render video Im calling the following function(here I’m not totally sure of its correctness):
(p.s. it says that this .update() method is deprecated but I’m getting no warning about it and searching through the web I couldn’t really find a substitute so I decided to go with it)

Is anyone able to help me? Have been stuck here for a while, I would really appreaciate a help! Thanks in advise:)

Perhaps these examples from the Collection of examples from will help.


Links in source code

Just noticed that the video in the VideoProjection example is no longer running. Neither in the fiddle @Mugen87 nor in my version. In my version the copied three.js version
…/js/three.min.93.js has not been changed. If you call the video directly with the address, both the .ogv and the .mp4 version will run.

Are there any changes in the browsers since 2018? I do not usually deal with this topic.

@hofk Um, the browser console is full of these warnings:

three.min.93.js:128 THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.

Can you try to update the filter settings for the video texture?

In different browsers I get different errors in my version.

2020-06-20 21.58.56

Chrome 2020-06-20 21.51.08

Opera 2020-06-20 21.51.56

I never dealt with the videos and the filters, at that time I only took them from the fiddle. :confused:

I was interested in applying the video to a moving geometry.

Any chances to share the original VideoProjection fiddle?

first of all, thank you both for spending your time answering me,I appreciate that:)

I have been looking the videoProjection example code,and it’s confusing me even more because I’m doing exactly the same things done in that code.
I’m creating the texture,setting it to the material.
The only main difference is that in that example there is not .update() called anywhere… thought it was needed. I have tested it without that videotexture.update() in the render function,and nothing changed.
So my questions are the following:
-Do you confirm me that I don’t need to call any update anywhere? I ask this because the freezing frame on the videoTexture makes me thing that I need to update it somehow.
-All this being said, do you have any clue on why the videotexture I’m using is freezing, considering how similar the code I wrote and the example are?

Thank you all for your time! :smile:

Try adding autoplay to your video html tag. Also you might need loop

<video autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.

I cant rule out though that your movie file is just to large to hold in memory.

1 Like

this is the error I just got adding the autoplay loop:

I specify that the video I’m trying to use as videotexture is not too big, being a 6 seconds video.

Any idea on how to go further with this?

UPDATE: removing the loop and leaving only the autoplay,the video starts! Huge steps :smile: :smile:
Though,right now, the problem is that once the video is finished, it just got stucked because it does not “loop” itself.
The loop makes pop those errors though. Any help? We are on the right path!

2° UPDATE: trying to get some results I tried re-adding the loop word after the autoplay, and now the error has disappeared. I tried to recreate the error but I didn’t managed to do it,sadly. It looked like a one-time-thing.

We can consider this closed,and the solution will be considered the following(I’ll rewrite what @seanwasere suggested) :

Adding the autoplay loop in the html allowed the video been played.

<video autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.

Thanks to everyone!

see changes: Collection of examples from