title: Adding video as Texture in three.js
body: <p>I am working on this example of Three.js: <a href="http://threejs.org/examples/#canvas_geometry_panorama_fisheye" rel="noreferrer">http://threejs.org/examples/#canvas_geometry_panorama_fisheye</a></p>
  
  <p>In this example, instead of using 6 images, I am using 5 images and one video as a texture (The video format is .ogv). I have edited the above example as follows to achieve what I desire: </p>
  
  <pre><code>video = document.createElement('video');
  video.autoplay = true;
  video.src = "textures/videos/Row1Col1.ogv";
  var videoTexture = new THREE.Texture(video);
      videoTexture.needsUpdate = true;
  
  var materials = [
      videoTexture, // right
      loadTexture( 'textures/cube/Park2/negx.jpg' ), // left
      loadTexture( 'textures/cube/Park2/posy.jpg' ), // top
      loadTexture( 'textures/cube/Park2/negy.jpg' ), // bottom
      loadTexture( 'textures/cube/Park2/posz.jpg' ), // back
      loadTexture( 'textures/cube/Park2/negz.jpg' ) // front
  ];
  
  mesh = new THREE.Mesh( 
      new THREE.BoxGeometry( 300, 300, 300, 32, 32, 32 ), 
      new THREE.MultiMaterial( materials ) 
  );
  </code></pre>
  
  <p>The rest of the code is exactly same as in the aforementioned example. </p>
  
  <p>Instead of getting the desired result (which has five images rendered onto the sphere and one video playing on one of the 'side'), I am getting this:</p>
  
  <p><a href="https://i.stack.imgur.com/fkJKC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fkJKC.png" alt="enter image description here"></a></p>
  
  <p>The images are being rendered fine, but I don't see a video playing. There's just white text in it's place. Nothing else. </p>
  
  <p>I am new to Three.js and I am trying to use videos as textures for the first time. Please help me out by letting me know that how can I get the video played, in the specified region.</p>