Video transition in Three.js

Question

I want to play multiple videos in Three.js environment. I have finished loading video as texture and play it below and stuck at how to implement to load multiple video textures and play. Also adding some transition into it :(. Hope anyone can help me , give me some suggestions or right direction to do it. I'm fresh to webGL and Three.js.

    // MAIN

// standard global variables
var container, scene, camera, renderer, controls, stats;

// custom global variables
var video, videoImage, videoImageContext, videoTexture;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight;

init();
animate();

// FUNCTIONS    
function init() {
  // SCENE
  scene = new THREE.Scene();

  // CAMERA
  var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
  var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
  camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
  scene.add(camera);
  camera.position.set(0,200,500);
  camera.lookAt(scene.position);  
  // RENDERER
  if ( Detector.webgl )
    renderer = new THREE.WebGLRenderer( {antialias:true} );
  else
    renderer = new THREE.CanvasRenderer();

  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  renderer.setClearColor (0xFFFFFF, 1);
  container = document.getElementById( 'ThreeJS' );
  container.appendChild( renderer.domElement );
  // CONTROLS
  // controls = new THREE.OrbitControls( camera, renderer.domElement );
  // EVENTS
  THREEx.WindowResize(renderer, camera);


  // LIGHT
  // var light = new THREE.PointLight(0xffffff);
  // light.position.set(0,250,0);
  // scene.add(light);
  // FLOOR
  var floorTexture = new THREE.ImageUtils.loadTexture( 'logo.jpg' );
  var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
  var floorGeometry = new THREE.PlaneGeometry(500, 500, 0, 0);
  var floor = new THREE.Mesh(floorGeometry, floorMaterial);
  // floor.wrapS = THREE.RepeatWrapping;
  // floor.position.y = -0.5;
  // floor.rotation.x = - (Math.PI / 2);
  floor.position.y = -100;
  floor.rotation.x = - (Math.PI / 2);
  scene.add(floor); 



  ///////////
  // VIDEO //
  ///////////

  // create the video element
  video = document.createElement( 'video' );
  // video.id = 'video';
  // video.type = ' video/ogg; codecs="theora, vorbis" ';
  video.src = "video3.mp4";
  video.load(); // must call after setting/changing source
  video.play();

  // alternative method -- 
  // create DIV in HTML:
  // <video id="myVideo" autoplay style="display:none">
  //    <source src="videos/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
  // </video>
  // and set JS variable:
  // video = document.getElementById( 'myVideo' );

  videoImage = document.createElement( 'canvas' );
  videoImage.width = 1280;
  videoImage.height = 546;

  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;

  var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.DoubleSide } );
  // the geometry on which the movie will be displayed;
  //    movie image will be scaled to fit these dimensions.
  var movieGeometry = new THREE.PlaneGeometry( 600, 300, 4, 4 );
  var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
  movieScreen.position.set(0,50,-200);
  scene.add(movieScreen);

  camera.position.set(0,200,450);

  var vector = new THREE.Vector3(0,200,450);

  camera.lookAt(movieScreen.position);
  document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove(event) {
  mouseX = ( event.clientX - windowHalfX );
  mouseY = ( event.clientY - windowHalfY ) * 0.2;       
}

function animate() {
  requestAnimationFrame( animate );
  render();   
}



function render() { 

  camera.position.x += ( mouseX - camera.position.x ) * 0.05;
  camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
  camera.lookAt(scene.position);
  if ( video.readyState === video.HAVE_ENOUGH_DATA ) 
  {
    videoImageContext.drawImage( video, 0, 0 );
    if ( videoTexture ) 
      videoTexture.needsUpdate = true;
  }

  renderer.render( scene, camera );
}