Video texture playing but showing black
<p>I'm trying to create a video texture. My code will add the video to my scene, however my cube is just black. The video is there somewhere as I can hear the audio playing in my browser. I'm new to three.js so I'm not sure what I'm doing wrong. I have a camera and three lights. I can see the other objects in my scene and their textures are visible. My code is adapted from <a href="https://github.com/jeromeetienne/threex.videotexture" rel="nofollow">here</a>. Here is my HTML code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script src="libraries/three.js"&gt;&lt;/script&gt;
    &lt;script src="libraries/OBJLoader2.js"&gt;&lt;/script&gt;
    &lt;script src="libraries/OrbitControls.js"&gt;&lt;/script&gt;
    &lt;script src="libraries/MtlLoader.js"&gt;&lt;/script&gt;
    &lt;script src="libraries/DDSLoader.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;script src="libraries/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And here is my main.js code:</p>

<pre><code>//global variables
var renderer;
var scene;
var camera;
var cameraControl;
var loader;
var updateFcts  = [];

function createRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
}

function createCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.y = 100;
camera.position.z = 450;
camera.lookAt(scene.position);
cameraControl = new THREE.OrbitControls(camera);
}

var THREEx = THREEx || {}
THREEx.VideoTexture = function(url){
var video   = document.createElement('video');
video.width = 320;
video.height    = 240;
video.autoplay  = true;
video.loop  = true;
video.src   = url;
this.video  = video;
var texture = new THREE.Texture( video );
this.texture    = texture;
this.update = function(){
    if( video.readyState !== video.HAVE_ENOUGH_DATA )   return;
    texture.needsUpdate = true;     
}
  this.destroy  = function(){
    video.pause()
  }
}

function createVideo() {
var videoTexture= new THREEx.VideoTexture('models/textures/video.mp4')
var video   = videoTexture.video;
updateFcts.push(function(delta, now){
    videoTexture.update(delta, now)
});
var geometry    = new THREE.CubeGeometry(10,50,10);
var material    = new THREE.MeshBasicMaterial({
    map : videoTexture.texture,
    side: THREE.DoubleSide
});
var mesh    = new THREE.Mesh( geometry, material );
scene.add( mesh );
updateFcts.push(function(delta, now){
    mesh.rotation.x += 1 * delta;
    mesh.rotation.y += 2 * delta;       
});
}

function createLight() {
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 40, 20);
spotLight.shadowCameraNear = 20;
spotLight.shadowCameraFar = 50;
spotLight.castShadow = true;
scene.add(spotLight);
var ambient = new THREE.AmbientLight( 0x444444 );
ambient.castShadow = true;
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0.5, 0.5 ).normalize();
scene.add( directionalLight );
}

function init() {
scene = new THREE.Scene();
createRenderer();
createCamera();
createLight();
createVideo();
document.body.appendChild(renderer.domElement);
render();
}

 function render() {
cameraControl.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}

init();
</code></pre>