我正在尝试将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);
// ctx.clearRect ( 0,canvas.width,canvas.height );
}
});
有没有办法使它适用于Android和iOS设备?