Adding video as Texture in three.js

Question

I am working on this Three.js example: http://threejs.org/examples/#canvas_geometry_panorama_fisheye

In this example, instead of 6 images, I use 5 images and one video as a texture (video format -.ogv). I edited the above example as follows to achieve the desired:

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 ) 
);

The rest of the code is exactly the same as in the above example.

Instead of getting the desired result (which has five images displayed on the sphere, and one video played on one side), I get the following:

Images are displayed perfectly, but I do not see video playback. There is just white text. Nothing more.

Three.js, . , , , .

Answer 1

.
, , .
, .

// create the video element
video = document.createElement( 'video' );
video.src = "textures/videos/Row1Col1.ogv";
video.load(); // must call after setting/changing source
video.play();
videoImage = document.createElement( 'canvas' );
videoImage.width = 480;
videoImage.height = 204;

videoImageContext = videoImage.getContext( '2d' );
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

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