HTML5 Canvas drawImage mit Videoquelle funktioniert nicht auf Android

Question

Ich versuche, Canvas drawImage Methode mit Videoquelle zu verwenden, aber es funktioniert nicht in Android 4.4.2, getestet mit Chrome-Browser.

Hier ist mein 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); 
    } 

}); 

Fiddle:http://jsfiddle.net/h1hjp0Lp/

Gibt es eine Möglichkeit, wie gut es funktioniert mit Android und iOS-Geräte zu machen?

Answer 1

Es scheint ein Problem mit diesem spezifischen Dateiformat zu sein (mp4).

Eine webm Datei ersetzen und es funktioniert gut.

Leider, aber das war der Weg vonfür eine Weile (um wirklich WebM/Ogg und nicht nur mp4, unabhängig von dem, was Browser behaupten, zu unterstützen).

(I seiner Wette um einen Fehler in Zusammenhang mit anti-drm Screenshot Sachen wer weiß?)

beispielsweise verwenden, um die Quelle http://video.webmfiles.org/big-buck-bunny_trailer.webm und es wird funktionieren: http://jsfiddle.net/h1hjp0Lp/15/

Answer 2

Ich bin mit Chrome 43.0.2357.93 auf Android 5.0.1 und DrawImage funktionieren nicht für mp4 oder webm.

Es sieht so aus, als würde Chrome Rahmendaten vom Video-Tag nicht richtig erfassen. Wenn ich getImageData aufrufen und das resultierende imageData-Objekt überprüfe, werden alle RGBA-Werte auf 0 gesetzt.

Answer 3

Für HUAWEI GRA-TL00 mit Android 5.0.1 funktioniert drawImage nicht für mp4 oder webm.

Siehe Crestejs Video Bitmap.

Related Links:

1. Using Images

2. Can I use: Canvas?