Canvas Video Jittery/Laggy

[firelite]

The drawn video jitters (lags, plays, lags) when loading my video in the webm (VP9) and mp4 format. My video is only 3 MB and less than 30 seconds long. I tried re-exporting my video as webm VP8 but same issue is happening. Only using the Big Buck Bunny sample video seems to work on my website.

Are there any specific video format requirements needed for my video to work with this script?

Thank you.

[Stanko]

Hello @firelite

I don't know that much about video compression but I know that Safari (both OSX and iOS versions) do not support webm nor ogg/ogv but only mp4. So you might try to convert it to mp4 with different options. That's just my guess.

Also iOS 10 supports inline auto play videos (muted ones only) as you can see here https://webkit.org/blog/6784/new-video-policies-for-ios/

So I won't be actively supporting this repo (I should add this links to readme).

I created a simple test you can try here (works on both Android and iOS): https://codepen.io/stanko/full/jmaGxv/

<video autoplay loop muted webkit-playsinline playsinline>
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>

Hope this helps, cheers!

[markhker]

I don't see this issue on iOS, only Android and Web; since i'ts intended for iPhones only I can understand that don't works well on Android, etc.

So I think there is another aproach to do this on Android devices.