3js video texture

videoTexture.js

video = document.createElement( 'video' );

  video.height = 172;
  video.width = 308;



  video.src = "../asset_src/closer.mp4";
  video.load(); // must call after setting/changing source
  video.play();
  videoImage = document.createElement( 'canvas' );
  videoImageContext = videoImage.getContext( '2d' );
  // background color if no video present
  videoImageContext.fillStyle = '#ffffff';
  videoImageContext.fillRect( 0, 0, video.width, video.height );

  videoTexture = new THREE.Texture( videoImage );
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBFormat;
  videoTexture.needsUpdate = true;

  var xCenter = Math.cos(toRadians(350)) * 72;
  var zCenter = Math.sin(toRadians(350)) * 72;
  var geo = new THREE.BoxGeometry(20.6,12,.01)
  var mat = new THREE.MeshStandardMaterial({overdraw: 0.5, color: mint, map: videoTexture,roughness: 1})
  //global variable
  mainVidLady = new THREE.Mesh(geo,mat)
  mainVidLady.position.set(xCenter,2,zCenter)
  
  mainVidLady.name = "target";
  mainVidLady.rotation.y = 1.5708
  mainVidLady.castShadow = true;
  mainVidLady.receiveShadow = true;

  scene.add(mainVidLady)