6 ms·
Canvid.js – tiny library for playing video on canvas elements
- moklick 11y agoThere is also cssvid (https://github.com/AndyTheGiant/cssVid https://github.com/AndyTheGiant/cssVid). It does the same but with background positioning instead of drawing on a canvas.
- asteadman 11y agoWhy use javascript though? Here's my crude attempt at a CSS only implementation (Using CSS3 animations). https://output.jsbin.com/qocefivowa https://output.jsbin.com/qocefivowa
- iamleppert 11y agoYou mention you're limited to short videos due to issues with the maximum size of images on ios. Why not just generate multiple images? That way you could load the video "parts" in parallel as well.
- nuclearghost 11y agoOn iOS Safari you're limited to 2 parallel HTTP connections at a time so not a huge advantage to the multiple connections. Don't disagree with splitting it up though
- moklick 11y agoYep! If you have a long video, its better to split the sprite into multiple parts.
- tantalor 11y agoHere's the massive jpeg sprite they use: http://gka.github.io/canvid/images/canvid-example.jpg http://gka.github.io/canvid/images/canvid-example.jpg
- elcct 11y agoJpeg is massive The world is in trouble Ah what we tell dem murdera
- jrowley 11y agoVery cool! Good solution to how gifv's pause background music on iOS too.
- phoboslab 11y agoSame demo video as mpeg1, 243kb, decoded in JavaScript: http://phoboslab.org/files/jsmpeg/cat/ http://phoboslab.org/files/jsmpeg/cat/ Longer demo: http://phoboslab.org/files/jsmpeg/ http://phoboslab.org/files/jsmpeg/
- acgourley 11y agoWhat are the trade offs in terms of size and processing required?
- phoboslab 11y agoDecoding an MPEG1 video is of course much more taxing on the CPU than scrolling through a large image, but low-res videos shouldn't be a problem even on older mobile devices. jsmpeg uses WebGL to speed up the decoding process a bit. On an iPhone5S, it can decode 720p video in realtime[1]. jsmpeg only unpacks the current frame into memory instead of decoding the whole video at once, so it's memory footprint should be much lower. MPEG1 files are also much smaller than storing individual JPEG frames. [1] http://phoboslab.org/files/jsmpeg/benchmark-720p.html http://phoboslab.org/files/jsmpeg/benchmark-720p.html
- acgourley 11y agoWhat about for a short loop? Can it cache some frames so that could be fast?
- coldtea 11y ago>On an iPhone5S, it can decode 720p video in realtime[1]. While killing the battery while doing it... Why we don't just expose lower level decoding apis to JS instead, I don't know...
- ZenPsycho 11y agobecause of how easy it would be for the already bloated ad laden mobile web to abuse those powers, and how seriously obnoxious, bandwidth eating, and battery killing the results would be.
- jamesloper 11y agoPretty fun experiment. I wonder if just having the big sprite sheet in a div and positioning the image with -webkit-translate would perform as good.
- deleted 11y ago[deleted]
- zurichisstained 11y agoHa, just spent some time figuring out how to do this myself -- going to take a look and compare. Sounds really neat!
- _jomo 11y ago> Because you can't embed and autoplay HTML5 videos on iOS! Yeah, that sucks. Are there other legitimate use cases than using this a fallback for iOS? Curious.
- detaro 11y agoCould be interesting if you wanted to do client-side filtering/modifications, but a lot of that is probably possible with video files (and maybe WebGL) as well.
- burroughs 11y agoHow does this differ from Apple's launch of iPhone 5 website? Previously: https://news.ycombinator.com/item?id=4531088 https://news.ycombinator.com/item?id=4531088 Teardown: https://docs.google.com/document/u/1/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI https://docs.google.com/document/u/1/pub?id=1GWTMLjqQsQS45FW...
- ZenPsycho 11y agoApple's tech dedups 8x8 pixel blocks and creates a jpeg image that is a lookup table of 8x8 pixel blocks, using a json data object to figure out which blocks go where on each frame. this thing just stores full frames in a giant jpeg and displays them.
- stankot 11y agoNice, I did something similar few months a go. http://stanko.github.io/html-canvas-video-player/ http://stanko.github.io/html-canvas-video-player/
- ZenPsycho 11y agoif you wanted to replicate Apple's technique, there's a neat (but discontinued) app on the mac app store called phosphor that will take in movies or frames and output in the apple-like canvas/json/jpeg 8x8 pixel blob format. https://www.divergentmedia.com/phosphor https://www.divergentmedia.com/phosphor Whether you actually gain anything from using this technique as opposed to other simpler techniques like canvid, well, let's just say YMMV