带有视频源的 HTML5 Canvas drawImage 在 Android 上不起作用答案

【问题标题】：HTML5 Canvas drawImage with video source not working on Android带有视频源的 HTML5 Canvas drawImage 在 Android 上不起作用
【发布时间】：2015-08-06 19:55:45
【问题描述】：

我正在尝试将 canvas 的 drawImage 方法与视频源一起使用，但它在 Android 4.4.2 中不起作用，并在 Chrome 浏览器中进行了测试。

这是我的代码：

$(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 设备？

【问题讨论】：

尝试将click事件替换为touchstart，看看是否有效。
@Allen，谢谢，但它不起作用。
阅读此内容后，Chrome 移动版似乎存在错误。我刚刚检查了以前使用 Video -> Canvas 完成的演示，它们不再工作。我会继续调查。 (Android 5.1)

标签： android html video canvas drawimage

【解决方案1】：

该特定文件格式 (mp4) 似乎存在问题。

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

不幸的是，这一直是<video> 的方式（实际上需要 webm/ogg 而不仅仅是 mp4，不管浏览器声称支持什么）。

（我敢打赌这是一个与反drm屏幕截图有关的错误？谁知道）

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

【讨论】：

在 android 版本低于 5.0 的设备上，视频中的 drawImage 仍然无法正常工作...

【解决方案2】：

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

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

【讨论】：

我发现这在几个月前已停止在 Android 上的 Chrome 上运行，它曾经可以运行。我发现它可以在 Android 上的 Chrome Beta 上运行。这是我的测试：codepen.io/kus/full/aOqvWP我正在使用 Android 5.1.1 Chrome 43.0.2357.93

【解决方案3】：

对于搭载 Android 5.0.1 的 HUAWEI GRA-TL00，drawImage 不适用于 mp4 或 webm。

参考crestejs视频位图。