android在canvas是播放视频,带有视频源的HTML5 Canvas drawImage无法在Android上运行

我正在尝试将canvas的draw

Image方法与视频源一起使用,但它在使用Chrome浏览器测试的

Android 4.4.2中无效.

这是我的代码：

$(function() {

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var video = document.getElementById('video');

var videoWidth;

var videoHeight;

var paused = false;

canvas.addEventListener('click', function() {

if (paused) {

video.play();

} else {

video.pause();

}

paused = !paused;

});

video.addEventListener("loadedmetadata", function() {

videoWidth = this.videoWidth || this.width;

videoHeight = this.videoHeight || this.height;

canvas.width = videoWidth;

canvas.height = videoHeight;

}, false);

video.addEventListener('play', function() {

var $this = this; // cache

(function loop() {

if ( ! $this.paused && ! $this.ended ) {

drawImage($this);

requestAnimationFrame(loop);

// setTimeout(loop, 1000 / 25); // drawing at 25 fps

}

})();

}, 0);

function drawImage(frame) {

ctx.drawImage(frame, 0, 0);

// ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );

}

});

有没有办法使它适用于Android和iOS设备？