HTML5 Canvas drawImage with video source not working on Android

Question

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.

Here\'s my code:

Answer 1

For HUAWEI GRA-TL00 with Android 5.0.1, drawImage isn't working for mp4 or webm.

Refer to crestejs video Bitmap.

Related Links:

1. Using Images

2. Can I use: Canvas?

Answer 2

It seems to be an issue with that specific file format (mp4).

Substituting a webm file and it works fine.

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).

(I bet its a bug relating to anti-drm screenshot stuff? who 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 3

I'm running Chrome 43.0.2357.93 on Android 5.0.1, and drawImage isn't working for mp4 or webm.

It looks like Chrome isn't properly capturing frame data from the video tag. When I call getImageData and inspect the resulting imageData object, the RGBA values are all set to 0.