HTML5 Canvas drawImage with video source not working on Android

Question

I am trying to use the canvas drawImage method with a video source, but it does not work in Android 4.4.2, tested in Chrome browser.

Here is my 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/

Is there a way to make it work with Android and iOS devices?

Answer 1

The problem seems to be related to the specific file format ( mp4 ).

Substituting a webm file and it works great.

Unfortunately, but that was the <video> for a while (actually, it requires webm / ogg, not just mp4, regardless of what browsers claim).

(I'm sure this is an error related to the anti-drm screenshot file that knows)

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

Answer 2

I am running Chrome 43.0.2357.93 on Android 5.0.1, and drawImage does not work for mp4 or webm.

It looks like Chrome is not correctly capturing frame data from a video tag. When I call getImageData and check the resulting imageData object, the RGBA values ​​are 0.

Answer 3

For the HUAWEI GRA-TL00 with Android 5.0.1, drawImage does not work for mp4 or webm.

Refer to the graphic image of crestejs.

Related links:

• Using Images

• Can I use: Canvas?