Having problem with VideoTexture

Hello, I have a problem with video texture in my project. I am using Nuxt.js as a framework .
I have a problem with playing video in videotexture. I am using planegeometry and videotexture.
This is my GitHub repository.

I will be very thankful if you can look at three.js part of my code and help me with my task.

What does that mean? Please be more specific and describe the problem in detail.

1 Like

<video id=“video” type=“video/ogv” style=“display:none”>
<source src="…/static/Sintel.ogv" type=“video/ogg” />

const video = document.getElementById(“video”);

const texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

const geometry = new THREE.PlaneGeometry(5, 2);
const material = new THREE.MeshBasicMaterial({ map: texture });

const plane = new THREE.Mesh(geometry, material);
plane.material.side = THREE.DoubleSide;
plane.position.y = 1;

In this part of my code where I add a VIDEOTEXTURE is not working properly Can you please say which part of code I fail. I am new in three.js thnak you

1 Like

Again, what does that mean?

it just shows a black plane

and the video is not showing on PlaneGeometry this is what I get I want to play video after three.js starts
and I get this error Uncaught (in promise) DOMException and I could not find any article that helps me to avoid this error in three.js

Which browser are you using? What about the official three.js examples? Do they work for you?


yes they do work fine. I used this article for my project.
the only thing I think is that all projects have a play button which gives time to load video I used

video.onloadeddata = function() { // the function will trigger after data loads
but it did not work

Just playback the video will cause a security error since a user interaction is required when starting the video and if it is not muted. Besides, notice that ogg files are not supported in Safari (that’s why I asked for your browser).


I.m using a video texture as a windscreen in a flight simulator to simulate rain falling on the windshield.

All is fine in Firefox and Edge, but in Chrome the video does not play.

This is the video element

<video id="video" type="video/webm"  muted loop autoplay width="512" height="512" src="rain_on_glass.webm" style="display: none;"></video>

Can you advise what is needed in Chrome to autoplay the video ? I don’t want users to have to press a button to play it.

Chrome version is 87