HTML5 Canvas drawImage con sorgente video non funzionante su Android

Question

Sto cercando di utilizzare il metodo drawImage della tela con origine video, ma non funziona in Android 4.4.2, testato con il browser Chrome.

Ecco il mio codice:

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

C'è un modo per fare che funziona con i dispositivi Android e iOS come bene?

Answer 1

Sembra essere un problema con quello specifico formato di file (mp4).

Sostituire un file webm e funziona correttamente.

Sfortunato, ma questo è stato il modo di <video> per un po '(per richiedere davvero webm/ogg e non solo mp4, indipendentemente da ciò che i browser affermano di supportare).

(scommetto sua un bug relativo alla roba screenshot anti-DRM chi lo sa?)

ad esempio utilizzare la sorgente http://video.webmfiles.org/big-buck-bunny_trailer.webm e funzionerà: http://jsfiddle.net/h1hjp0Lp/15/

Answer 2

Io corro Chrome 43.0.2357.93 su Android 5.0.1 e drawImage non funzionano per mp4 o webm.

Sembra che Chrome non ritenga correttamente i dati dei frame dal tag video. Quando chiamo getImageData e ispezionare l'oggetto imageData risultante, i valori RGBA sono tutti impostati a 0.

Answer 3

per Huawei GRA-TL00 con Android 5.0.1, drawImage non funziona per MP4 o WebM.

Fare riferimento a Bitmap video crestejs.

Link correlati:

1. Using Images

2. Can I use: Canvas?