HTML5 Canvas drawImage с источником видео не работает на Android

Я пытаюсь использовать 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?

3 ответов


кажется, это проблема с этим конкретным форматом файла (mp4).

заменить webm файл, и он работает нормально.

к сожалению, но это был путь <video> на некоторое время (действительно требуется webm/ogg, а не только mp4, независимо от того, какие браузеры утверждают, что поддерживают).

(Я уверен, что это ошибка, связанная с анти-drm скриншот вещи? кто знает)

например, используйте источник http://video.webmfiles.org/big-buck-bunny_trailer.webm и оно будет работать: http://jsfiddle.net/h1hjp0Lp/15/


Я запускаю Chrome 43.0.2357.93 на Android 5.0.1, и drawImage не работает для mp4 или webm.

похоже, что Chrome неправильно захватывает данные кадра из тега видео. Когда я вызываю getImageData и проверяю результирующий объект imageData, значения RGBA устанавливаются в 0.


для HUAWEI GRA-TL00 с Android 5.0.1,drawImage не работает mp4 или webm.

обратитесь к crestejs видео растрового изображения.

Ссылки:

  1. Использование Изображений

  2. можно ли использовать: холст?