TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Canvid.js – tiny library for playing video on canvas elements

66 pointsby callumlockeover 9 years ago

11 comments

phoboslabover 9 years ago
Same demo video as mpeg1, 243kb, decoded in JavaScript: <a href="http:&#x2F;&#x2F;phoboslab.org&#x2F;files&#x2F;jsmpeg&#x2F;cat&#x2F;" rel="nofollow">http:&#x2F;&#x2F;phoboslab.org&#x2F;files&#x2F;jsmpeg&#x2F;cat&#x2F;</a><p>Longer demo: <a href="http:&#x2F;&#x2F;phoboslab.org&#x2F;files&#x2F;jsmpeg&#x2F;" rel="nofollow">http:&#x2F;&#x2F;phoboslab.org&#x2F;files&#x2F;jsmpeg&#x2F;</a>
评论 #10473282 未加载
tantalorover 9 years ago
Here&#x27;s the massive jpeg sprite they use: <a href="http:&#x2F;&#x2F;gka.github.io&#x2F;canvid&#x2F;images&#x2F;canvid-example.jpg" rel="nofollow">http:&#x2F;&#x2F;gka.github.io&#x2F;canvid&#x2F;images&#x2F;canvid-example.jpg</a>
评论 #10473538 未加载
moklickover 9 years ago
There is also cssvid (<a href="https:&#x2F;&#x2F;github.com&#x2F;AndyTheGiant&#x2F;cssVid" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;AndyTheGiant&#x2F;cssVid</a>). It does the same but with background positioning instead of drawing on a canvas.
评论 #10474042 未加载
iamleppertover 9 years ago
You mention you&#x27;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 &quot;parts&quot; in parallel as well.
评论 #10473343 未加载
评论 #10475537 未加载
_jomoover 9 years ago
&gt; Because you can&#x27;t embed and autoplay HTML5 videos on iOS! Yeah, that sucks.<p>Are there other legitimate use cases than using this a fallback for iOS? Curious.
评论 #10473759 未加载
jamesloperover 9 years ago
Pretty 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.
burroughsover 9 years ago
How does this differ from Apple&#x27;s launch of iPhone 5 website?<p>Previously: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=4531088" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=4531088</a><p>Teardown: <a href="https:&#x2F;&#x2F;docs.google.com&#x2F;document&#x2F;u&#x2F;1&#x2F;pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI" rel="nofollow">https:&#x2F;&#x2F;docs.google.com&#x2F;document&#x2F;u&#x2F;1&#x2F;pub?id=1GWTMLjqQsQS45FW...</a>
评论 #10474950 未加载
stankotover 9 years ago
Nice, I did something similar few months a go. <a href="http:&#x2F;&#x2F;stanko.github.io&#x2F;html-canvas-video-player&#x2F;" rel="nofollow">http:&#x2F;&#x2F;stanko.github.io&#x2F;html-canvas-video-player&#x2F;</a>
jrowleyover 9 years ago
Very cool! Good solution to how gifv&#x27;s pause background music on iOS too.
ZenPsychoover 9 years ago
if you wanted to replicate Apple&#x27;s technique, there&#x27;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&#x2F;json&#x2F;jpeg 8x8 pixel blob format.<p><a href="https:&#x2F;&#x2F;www.divergentmedia.com&#x2F;phosphor" rel="nofollow">https:&#x2F;&#x2F;www.divergentmedia.com&#x2F;phosphor</a><p>Whether you actually <i>gain</i> anything from using this technique as opposed to other simpler techniques like canvid, well, let&#x27;s just say YMMV
zurichisstainedover 9 years ago
Ha, just spent some time figuring out how to do this myself -- going to take a look and compare. Sounds really neat!