HTML5 Canvas drawImage ze źródła wideo nie działa na Androidzie

Question

Próbuję użyć płótno za drawImage metodę ze źródła wideo, ale to nie działa w Androidzie 4.4.2, przetestowane z przeglądarki Chrome.

Oto mój kod:

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

Czy istnieje sposób, aby to działa z urządzeniami z Androidem i iOS, jak również?

Answer 1

Wydaje się być problem z tym formatem określonym pliku (mp4).

Podstawiając plik webm i działa dobrze.

Niefortunne, ale przez jakiś czas było to przyczyną <video> (aby naprawdę wymagać webm/ogg, a nie tylko mp4, niezależnie od tego, jakie przeglądarki twierdzą, że obsługują).

(założę swój błąd odnoszące się do anty-DRM screenshot rzeczy kto wie?)

na przykład użyć źródło http://video.webmfiles.org/big-buck-bunny_trailer.webm i będzie działać: http://jsfiddle.net/h1hjp0Lp/15/

Answer 2

biegnę na Chrome 43.0.2357.93 Android 5.0.1, i drawImage nie działa dla mp4 lub webm.

Wygląda na to, że Chrome nie przechwytuje prawidłowo danych ramek z tagu wideo. Kiedy zadzwonić getImageData i skontrolować obiekt wynikowy imageData wartości RGBA są ustawione na 0.

Answer 3

do Huawei GRA-TL00 z Androida 5.0.1, drawImage nie pracuje dla MP4 lub WebM.

Patrz crestejs Bitmap wideo.

Powiązane linki:

1. Using Images

2. Can I use: Canvas?