Transparency for webm Video texture

Hi Everyone,

I am trying to add a video textured geometry inside the scene. For POC, I am trying to map the texture of plane geometry. Eventually, I would be loading it on other geometries like cylinders. The video is being played but transparency is not being set. I have added a transparent property to material and format as RGBA to texture property

Any help on this would be great.

        video = document.createElement( 'video' );
        video.src = "testAudio.webm";
	videoImage = document.createElement( 'canvas' );
	videoImage.width = 240 * 2;
	videoImage.height = 102 * 2;

	videoImageContext = videoImage.getContext( '2d' );
	videoImageContext.fillStyle = '#000000';
	videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

	videoTexture = new THREE.Texture( videoImage );
	videoTexture.minFilter = THREE.LinearFilter;
	videoTexture.magFilter = THREE.LinearFilter;
	videoTexture.format = THREE.RGBAFormat;

        var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, transparent: true } );
	var movieGeometry = new THREE.PlaneGeometry( 120* 2, 50* 2, 4, 4 );
	var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );

Please create your video texture like so and try again:

<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
    <source src="testAudio.webm">
const video = document.getElementById( 'video' );;

const texture = new THREE.VideoTexture( video );
texture.format = THREE.RGBAFormat;

When using VideoTexture, minFilter and magFilter are already set to THREE.LinearFilter.

Notice that you need a user interaction before starting the video (otherwise you violate the autoplay policy and it won’t work). Besides, you should definitely add a MP4 version of your video since WebM is not supported by all browsers. Use the following example as a code template: