{"id":5995,"date":"2012-09-17T11:41:03","date_gmt":"2012-09-17T16:41:03","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=5995"},"modified":"2012-09-17T12:23:46","modified_gmt":"2012-09-17T17:23:46","slug":"apple-jpeg-video-qtvr","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2012\/09\/17\/apple-jpeg-video-qtvr\/","title":{"rendered":"How Apple Compresses Video Using JPEG, JSON, and &lt;canvas&gt;"},"content":{"rendered":"<p><a href=\"https:\/\/docs.google.com\/document\/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI\">David Bloom<\/a> (via <a href=\"http:\/\/news.ycombinator.com\/item?id=4531088\">Hacker News<\/a>):<\/p>\n<blockquote cite=\"https:\/\/docs.google.com\/document\/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI\"><p>&lt;video&gt; elements can only be played fullscreen on iPhone, which kind of ruins the desired effect of this inline video.<\/p>\n<p>And on desktop computers, Apple&rsquo;s Web site needs to work on all major browsers, but Firefox and Opera won&rsquo;t support h.264 (and there&rsquo;s no way that Apple would be willing to offer WebM or Theora fallback).<\/p>\n<p>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 &ldquo;Features&rdquo; page&mdash;which loads about 5 MB of JPEG images (using lots of separate HTTP requests) just for that 2 second effect.<\/p>\n<p>For iPhone 5, they came up with a new approach that doesn&rsquo;t require a separate image for each frame.<\/p>\n<\/blockquote>\n<p>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.<\/p>","protected":false},"excerpt":{"rendered":"<p>David Bloom (via Hacker News): &lt;video&gt; elements can only be played fullscreen on iPhone, which kind of ruins the desired effect of this inline video. And on desktop computers, Apple&rsquo;s Web site needs to work on all major browsers, but Firefox and Opera won&rsquo;t support h.264 (and there&rsquo;s no way that Apple would be willing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[38,85,97,96],"class_list":["post-5995","post","type-post","status-publish","format-standard","hentry","category-technology","tag-apple","tag-iphone","tag-video","tag-web"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/5995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=5995"}],"version-history":[{"count":4,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/5995\/revisions"}],"predecessor-version":[{"id":6006,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/5995\/revisions\/6006"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=5995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=5995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=5995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}