HTML5画布的drawImage与视频源不工作在Android

问题描述

我想用画布的drawImage 法的视频源，但它不工作的安卓4.4.2，与Chrome浏览器进行测试。

I am trying to use canvas's drawImage method with video source, but it's not working in Android 4.4.2, tested with Chrome browser.

下面是我的code：

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

Is there a way to make it works with Android and iOS devices as well?

推荐答案

这似乎是一个问题与特定的文件格式（ MP4 ）。

It seems to be an issue with that specific file format (mp4).

替换一个 WEBM 文件，它工作正常。

Substituting a webm file and it works fine.

不幸的，但是这一直是＆LT的方式;视频＆GT; 一段时间（到真正需要WEBM / OGG并不仅仅是MP4，不管是什么浏览器声称支持）。

Unfortunate, but that's been the way of <video> for a while (to really require webm/ogg and not just mp4, regardless of what browsers claim to support).

（我敢打赌，它的有关反DRM截图的东西，谁知道一个错误？）

(I bet its a bug relating to anti-drm screenshot stuff? who knows)

例如使用源 http://video.webmfiles.org/big-buck-bunny_trailer.webm ，也将努力：的

for example use the source http://video.webmfiles.org/big-buck-bunny_trailer.webm and it will work: http://jsfiddle.net/h1hjp0Lp/15/

这篇关于HTML5画布的drawImage与视频源不工作在Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！