Nice to see they're getting bit by their own decisions.<p>They've gone out of their way to ensure that you can't ever play an Audio/Video clip automatically on page load in iOS Safari. Every new iOS release for the first few years included a patch to kill any new workarounds that let you do so. (Curse you iOS 4.3 for taking away our simulated clicks.)<p>But now they have a use case of their own that needs it, so they invent the mother of all workarounds. And now the rest of us will start using it. And it will become the "standard" way to run video on iOS Safari.<p>Then they'll kill it off for iOS 7. Then they'll have to come up with an even crazier workaround so that they can render their own website a few months later.<p>Fascinating to watch this play out.
I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid using a <video> tag.
> Apple's website needs to work on all major browsers<p>That doesn't seem true. The second-most-prominent links on the iPhone and iPad sites are to videos that only play in Quicktime. If they wanted the site to work everywhere, they'd use a format those browsers can natively play.
Sublime Text was already doing the same with the big animation of its home page: <a href="http://www.sublimetext.com/" rel="nofollow">http://www.sublimetext.com/</a>
(you can actually see three animations there, depending if you use Windows, Linux or Mac).<p>What I'm really curious about is how those images are being generated. Is there a tool already available for that?
This whole implementation could just have been someone's weekend hobby that made it to production. Remember how Apple got its intel based macs? <a href="http://qr.ae/8eDNG" rel="nofollow">http://qr.ae/8eDNG</a><p>Just want to mention it before we blurt out the obvious over-engineering argument. ;)
Speaking of Apple website updates, I am surprised that they have never offered a responsive design for their apple.com site where you buy iPhones and iPads. Every app they make is designed differently for the phone or the iPad, but not the website.
It's a shame webkit never implemented the Animated PNG extensions and that no browser supports MNG:<p><a href="http://en.wikipedia.org/wiki/APNG" rel="nofollow">http://en.wikipedia.org/wiki/APNG</a>
<a href="http://caniuse.com/apng" rel="nofollow">http://caniuse.com/apng</a><p>This would probably some of what people want here.
If someone is interested in creating animations in this way, I created a simple script which converts videos in PNG/JSON/canvas:<p><a href="http://blog.webmatters.it/2012/09/canvas-rocks-video-sucks/" rel="nofollow">http://blog.webmatters.it/2012/09/canvas-rocks-video-sucks/</a>
Very interesting.
Looks like some oldschool video game developers got into Apple webdev team.<p>About the last paragraph, we (Adinpsz) tried the PNG compression technique for JS demomaking (actually it's even a self-loading PNG-HTML ;)).
You can learn more here with the JsExe tool: <a href="http://creativejs.com/2012/06/jsexe-javascript-compressor/" rel="nofollow">http://creativejs.com/2012/06/jsexe-javascript-compressor/</a>
And see it in action here: <a href="http://pouet.net/prod.php?which=59071" rel="nofollow">http://pouet.net/prod.php?which=59071</a> (<a href="http://adinpsz.org/online/fabrik/" rel="nofollow">http://adinpsz.org/online/fabrik/</a>)<p>But HTTP compression should be better anyway for "real world" usecases?
Keep in mind that Apple outsources a lot of this front-end work to their agency, TBWA/Chiat/Day Media Arts Lab. As a services firm they have less incentive to use standards created by Apple, though I think they do really great work.
Nice teardown. Knew they were using a <canvas> tag, but didn't dive deep enough see how they were using Base64 and decoding the frames. Thanks for writing this up.
Isn't this the same as Clipstream[1]? The company that developed it has filed for patent[2]. I wonder if Apple licensed the technology or came up with it themselves independently.<p>[1] <a href="http://news.ycombinator.com/item?id=4419345" rel="nofollow">http://news.ycombinator.com/item?id=4419345</a><p>[2] <a href="http://www.dsny.com/HTML5" rel="nofollow">http://www.dsny.com/HTML5</a>
After reading this article I still don't have a clear idea of how they did the animation. It seems pretty in-depth technically, but the overall execution is still a mystery.<p>For example, how does the _frames array of base64 data related to the two unlock_00X.jpg files? All it says is "The "unlock_manifest.json" file specifies how the updated parts are positioned."
Regarding the retina loupe effect demo this has been done a while back - using css and an image for the loupe edge. Picks up mouse and touch events. Even works on older browsers.<p><a href="http://homepage.ntlworld.com/infinnerty/differences/attic/attic.html" rel="nofollow">http://homepage.ntlworld.com/infinnerty/differences/attic/at...</a>
This idea is also in use at <a href="http://www.sublimetext.com/" rel="nofollow">http://www.sublimetext.com/</a> The demo is using this technique because streaming video would actually take more bandwidth in this case as only bits of the image are actually changing at one time/incremental changes. It works a treat!
> You can see this in action on the Retina Macbook Pro "Features" page -- which loads about 5MB of JPEG images (using lots of separate HTTP requests) just for that 2 second effect.<p>I immediately thought of web1.0 sites of 1990-s, with lots of animated gifs floating around. Weird times.
I see a lot of comments describing this as new and unique. Hardly. Video compression by using image diffs and run-length encoding has been around since the 80s. In fact this is more-or-less the technique that Quicktime's first codec, "Cinepak", used.
OK, so this would be one of those instances where I support a headline rewrite for clarification. The iPhone connection is incidental and I expected something entirely different.<p>This was more along the lines of, "How Apple reinvented/over-engineered the animated GIF"
As a side note, publishing this on Google Docs is an interesting choice by the author - alleviates any need to worry about load from the piece becoming popular, but it almost makes it an anonymous article.
There could another simpler way. NoVnc + tightpng encoding. Create and record a high framerate VNC session to desired video. Tweak no vnc to receive data from local callbacks and replay the recorded data.
This is brilliant, maybe overpowered but brilliant.
But the thing I cannot stand is the use of images for text.
I would have preferred to se the use of @font-face with fallback to images for old browsers.
when you browse istore from an android device they added programmatic wiggle and jerk when you scroll the screenshots for an app. It's hilarious because android jerking wasn't that consistent. to make it authentic they needed to add randomness to it.
Great analysis, very interesting.<p>Obviously this is absurd overengineering.<p>And, despite the assumed total cross-browser compatibility claimed, I found that the video wouldn't play in any browser available to me, despite pinning the CPUs on my computer while just sitting there doing nothing.