Trying to use video texture but not works

Hi i am trying to use video texture but my code not works

the below is my code

import { EffectComposer } from '/resources/js/three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from '/resources/js/three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from '/resources/js/three/examples/jsm/postprocessing/ShaderPass.js';

const container = document.getElementById('canvas');
const canvasElement = document.createElement('canvas');
container.appendChild(canvasElement);
	
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ 
	canvas: canvasElement, 
	alpha: true
	});
renderer.setSize(container.offsetWidth, container.offsetHeight);

let video = document.createElement('video');
video.src = '/resources/flame.mp4';
video.autoplay = true;
video.loop = true;
video.muted = true;
video.load();
video.play().then(() => {
  console.log("Video is playing successfully.");
}).catch(error => {
  console.error("Error occurred when trying to play the video: ", error);
});

let vtexture = new THREE.VideoTexture(video);
vtexture.minFilter = THREE.LinearFilter;
vtexture.magFilter = THREE.LinearFilter;
vtexture.format = THREE.RGBFormat;


const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

const effect = {
    uniforms: {
        tDiffuse: { value: vtexture }
    },
    vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        uniform sampler2D tDiffuse;
        varying vec2 vUv;
        void main() {
            vec4 texture = texture2D(tDiffuse, vUv);
            gl_FragColor = texture;
        }`
};

const customPass = new ShaderPass(effect);
customPass.renderToScreen = true;
composer.addPass(customPass);

function animate() {
	requestAnimationFrame(animate);
	    
	if (video.readyState === video.HAVE_ENOUGH_DATA) {
	        vtexture.needsUpdate = true;
	    }

		composer.render();
	    }
	    animate();

it must shows video texture on the screen(I mean in camera by postprocessing but it shows anything

it shows error below

Error occurred when trying to play the video: DOMException: Failed to load because no supported source was found.

I have changed my video file to other or convert it to other form such as avi, mp4 webm or something but none of them works

How to display my video texture in front of camera view by postprocessing proplery?