Question

我正在尝试使用带有视频源的canvas drawImage方法，但它在使用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 );
    }

});

小提琴： http://jsfiddle.net/h1hjp0Lp/

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

Answer 1

这似乎是特定文件格式（mp4）的问题。

替换webm文件，它可以正常工作。

不幸的是，但<video>一段时间以来一直是这种方式（真正需要webm / ogg而不仅仅是mp4，无论哪种浏览器声称支持）。

（我打赌它是一个与反drm截图相关的错误？谁知道呢）

例如使用来源http://video.webmfiles.org/big-buck-bunny_trailer.webm，它将起作用：http://jsfiddle.net/h1hjp0Lp/15/

Answer 2

我在Android 5.0.1上运行Chrome 43.0.2357.93，而drawImage不适用于mp4或webm。

Chrome似乎没有正确捕获视频标签中的帧数据。当我调用getImageData并检查生成的imageData对象时，RGBA值都设置为0。

Answer 3

对于使用Android 5.0.1的HUAWEI GRA-TL00，<dependency> <groupId>com.suvankar</groupId> <artifactId>my-core</artifactId> <version>1.0-RELEASE</version> </dependency>不适用于 mp4或webm。

请参阅crestejs视频位图。

带有视频源的HTML5 Canvas drawImage无法在Android上运行

3 个答案: