DOMException：无法加载，因为找不到支持的源。在视频three.js

Question

当我尝试使用keydown事件播放跨源视频时。我的问题是 DOMException：无法加载，因为 video.play（）行中没有找到支持的源。。更新chrome版本50后，它无法正常工作。在此之前，我没有遇到任何问题。任何人都可以告诉我这是什么问题。

video = document.createElement( 'video' );
video.type = ' video/mp4; codecs="theora, vorbis" ';
video.src = "http://abc/abc.mp4"; // cross origin video
video.setAttribute('crossorigin', 'anonymous');
video.load(); 

videoImage = document.createElement( 'canvas' );
videoImage.width = 1440;
videoImage.height = 1080;

videoImageContext = videoImage.getContext( '2d' );
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 } );
var movieGeometry = new THREE.PlaneGeometry( 7, 5);
movieGeometry.applyMatrix( new THREE.Matrix4().makeRotationY(-Math.PI/2));
var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
scene.add(movieScreen);


//event
function onKey(event) {
  if (event.keyCode == 82) { 
    video.play(); 
  }
}
window.addEventListener('keydown', onKey, true);

//code in animate function
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
    videoImageContext.drawImage( video, 0, 0 );
    if ( videoTexture ) 
        videoTexture.needsUpdate = true;
}