How Apple Compresses Video Using JPEG, JSON, and <canvas>
David Bloom (via Hacker News):
<video> elements can only be played fullscreen on iPhone, which kind of ruins the desired effect of this inline video.
And on desktop computers, Apple’s Web site needs to work on all major browsers, but Firefox and Opera won’t support h.264 (and there’s no way that Apple would be willing to offer WebM or Theora fallback).
Apple used to solve this problem by sending a separate JPEG image for each frame of video and switching between them. You can see this in action on the Retina MacBook Pro “Features” page—which loads about 5 MB of JPEG images (using lots of separate HTTP requests) just for that 2 second effect.
For iPhone 5, they came up with a new approach that doesn’t require a separate image for each frame.
Apple is also using this approach to allow rotating the EarPods image, QTVR-style. It seems like the leading edge of Web development is always pretty crazy.
