Having problem with VideoTexture

Questions
1

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.

2

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

1 Like
3

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

//SET PLANEGEOMETRY
const video = document.getElementById(“video”);
video.play()

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;
this.scene.add(plane);

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
4

Again, what does that mean?

5

it just shows a black plane

Capture
Capture.PNG1117Ă—812 87.2 KB

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

6

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

https://threejs.org/examples/webgl_materials_video
https://threejs.org/examples/webgl_video_panorama_equirectangular

7

yes they do work fine. I used this article for my project.
http://stemkoski.github.io/Three.js/Video.html
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
video.play()
};
but it did not work

8

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).

9

Hi,

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

thanks.

Steve