HTML5 Canvas drawImage与视频源不工作的Android [英] HTML5 Canvas drawImage with video source not working on Android

问题描述

我试图使用canvas的 drawImage 方法与视频源，但它不工作在Android 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.

这是我的代码：

$(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.

不幸的是，这已经是< video> 的方式了一段时间（真正需要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).

（

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

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

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