我收到DOMException: Failed to load 因为在 video.play() 中找不到支持的源；线。我只有在添加 video.setAttribute('crossorigin', 'anonymous'); 后才会遇到这个问题；我正在移动设备上开发应用程序，因此对于跨源，我需要添加此行。更新 chrome 50 版本后，我在它工作正常之前遇到了这个问题。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script>
var video = document.createElement( 'video' );
video.id = 'video';
video.type = ' video/mp4; codecs="theora, vorbis" ';
video.src = "http://abcde.com/img/videos/what_is_design_thinking.mp4";
video.volume = .1;
video.setAttribute('crossorigin', 'anonymous');
video.load(); // must call after setting/changing source
$('body').html(video);
video.play();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$('body').append(canvas);
video.addEventListener('play', function() {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.drawImage($this, 0, 0);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);
</script>
</body>
</html>