Adding video as Texture in three.js
<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>