Apple has a way of hiding new web tech in plain sight. Otherwise very good write-up. Thumbs up.
iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
101–110 of 121 posts
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#102Man, I wish there was a library to help us normal folk do similar things. The ability to do small video on mobile would rock.
You know, that this isn't exactly a video... If you really need to play a small video like that... try using gifs. It's easier, and there is only two drawbacks : 1- The stumbling loading of frames. 2- You can't do the thing they do with the earphones, going back and forth in the "video".
If you're fine with these two drawbacks... You probably don't need all that over-engineering.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#103> Apple's website needs to work on all major browsers 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.
Apple uses a bog standard -tag with a h.264 encoded video as its source. Every browser that can play that video (Internet Explorer, Chrome, Safari) will be able to play that video. If your browser can’t (Firefox), then it won’t be able to play that video and Apple is so nice and offers a sensible fallback. QuickTime is never required.
This is the first link on the iPhone page:
http://www.apple.com/apple-events/september-2012/
There is no tag, there is a "Get Quicktime" button, no video plays in my Chrome browser, and here's a screenshot of the network tab showing it downloaded a .MOV file with content-type movie/quicktime, not h.264: http://i.imgur.com/h8dO8.png
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#104Nice to see they're getting bit by their own decisions. 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.) But now they have a use case of their own that needs it, so they inv…
Thing is, it's not a video. It's a glorified animated gif. This has almost nothing to do with autoplay and the video tag and much more to do with a desire for a script-controllable animation. (Most obviously: they don't start playing until the animation data is loaded, so that it doesn't do the herky-jerky frame-playing during load, like actual animated gifs.)
> This has almost nothing to do with autoplay and the video tag and much more to do with a desire for a script-controllable animation.
Yes it does. Apple has disallowed you to play a video on iOS without user action. So it would not be possible for the video to autoplay (even with the scroll trigger). HTML5 supports preload and has the canplaythrough event which allows you to avoid buffering. They went through this rigamarole because they have previously decided developers should not be able to do this.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#105Earlier quoted context omitted.
Apple uses a bog standard -tag with a h.264 encoded video as its source. Every browser that can play that video (Internet Explorer, Chrome, Safari) will be able to play that video. If your browser can’t (Firefox), then it won’t be able to play that video and Apple is so nice and offers a sensible fallback. QuickTime is never required.
This is the first link on the iPhone page: http://www.apple.com/apple-events/september-2012/ There is no tag, there is a "Get Quicktime" button, no video plays in my Chrome browser, and here's a screenshot of the network tab showing it downloaded a .MOV file with content-type movie/quicktime, not h.264: http://i.imgur.com/h8dO8.png
That’s HTTP live streaming. Chrome doesn’t support that, so it gets the fallback. QuickTime is never required.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#106Earlier quoted context omitted.
Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012? There is a whole pattern of similar things like this in web that is killing me a little bit every day. Want to center a div on the page? No worries just wrap it in these 5 divs and apply these…
What's difficult about centering a box? Was that just sarcasm? A couple of approaches: Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children If it was sarcasm, disregard my stupidity.
Centering a box horizontally is simple. The original comment was referring to centering an element _vertically_, which is a much greater PITA.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#107Earlier quoted context omitted.
Thing is, it's not a video. It's a glorified animated gif. This has almost nothing to do with autoplay and the video tag and much more to do with a desire for a script-controllable animation. (Most obviously: they don't start playing until the animation data is loaded, so that it doesn't do the herky-jerky frame-playing during load, like actual animated gifs.)
> This has almost nothing to do with autoplay and the video tag and much more to do with a desire for a script-controllable animation. Yes it does. Apple has disallowed you to play a video on iOS without user action. So it would not be possible for the video to autoplay (even with the scroll trigger). HTML5 supports preload and has the canplaythrough event which allows you to avoid buffering. They went through this r…
They went through this rigamarole because it's an animation and animated gifs aren't great.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#108Earlier quoted context omitted.
This is the first link on the iPhone page: http://www.apple.com/apple-events/september-2012/ There is no tag, there is a "Get Quicktime" button, no video plays in my Chrome browser, and here's a screenshot of the network tab showing it downloaded a .MOV file with content-type movie/quicktime, not h.264: http://i.imgur.com/h8dO8.png
That’s HTTP live streaming. Chrome doesn’t support that, so it gets the fallback. QuickTime is never required.
> QuickTime is never required.
How do you propose I watch this QuickTime video without QuickTime? Have you forgotten the context of this conversation, about the purported desire to support all major browsers?
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#109Earlier quoted context omitted.
That’s HTTP live streaming. Chrome doesn’t support that, so it gets the fallback. QuickTime is never required.
> QuickTime is never required. How do you propose I watch this QuickTime video without QuickTime? Have you forgotten the context of this conversation, about the purported desire to support all major browsers?
It’s not a QuickTime video. That’s my main point. I disagree that Apple’s goal here is to make it work with all major browsers in all situations.
Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas
#110Earlier quoted context omitted.
> This has almost nothing to do with autoplay and the video tag and much more to do with a desire for a script-controllable animation. Yes it does. Apple has disallowed you to play a video on iOS without user action. So it would not be possible for the video to autoplay (even with the scroll trigger). HTML5 supports preload and has the canplaythrough event which allows you to avoid buffering. They went through this r…
They went through this rigamarole because it's an animation and animated gifs aren't great.
... And they made it an animation because of the limitations they built into iOS.