3. Overview
• Watch me use a PLAIN Keynote theme
• HTML5 Video in General
• What do we mean “devices?”
• Mobile Device “Issues”
• Coding time!
• Next steps (for you!)
5. Let’s talk <video>
• Part of the HTML5 standard
• Maybe the most exciting part of the actual
HTML5 standard
• Reduce Flash dependence
• Deliver video to “devices”
6. So...how we doing?
• HTML5 video is being adopted pretty
quickly...mostly.
• All major browsers except IE
• IE9 adds support
• But...
7. Enter the Codec Wars!
• Safari: H.264
• Chrome: H.264, WebM, Theora
• Firefox: Theora (WebM in FF4)
• Opera: WebM, Theora
• IE9: H.264, WebM (mostly)
8. Codec Hell Sucks!
• That’s only the beginning!
• Add mobile device support
• H.264 isn’t H.264
• WebM needs hardware support
• Lions and tigers and bears...OH MY!
9. Let’s not get worked up
(We can talk codecs after the session if you want)
10. Some Good News!
• The spec is pretty damn good (mostly)!
• Not so good: it isn’t usually fully implemented
11. This? This too?
So what’s a “device?”
Hrmm... Hopefully not this...
12. Smart Phones!
• Sure!
• Web browsers (Webkit, mostly)
• Hardware H.264 decoding
• Android, iOS (including iPad)
Did you notice on the last slide that the pieced together phone had a vibrator on it? Ewww!
14. Other “devices”
• Connected TVs
• GoogleTV
• Boxee Box, Roku Box, etc.
• HTPC, PS3, Xbox 360, Wii
• Not-so-smart phones
• Netbooks, Other tablets
15. Interface Challenges
The difficulty with all these devices is that they have
completely different input metaphors.
Touch, Controller, Keyboard & Mouse,
Remote Control, etc.
16. So let’s talk Mobile
Narrow our scope today to touch; so we’re not here
for 12 hours talking about every device under the sun
17. There are “Issues”
• Not all implementations are complete
• Not all implementations are equal
• No implementations are bug-free
19. And the method itself?
• Returns
• “probably”
• “maybe”
• “”
• But what is it based on?
• iPhone 3g vs. iPhone 4 vs. iPad vs.
• ...you get the point!
20. Well ok, that’s one...
• Well here’s another!
• load() must be explicitly called on iOS and
Android
• Otherwise the video won’t play
• Despite the spec saying that’s not needed
21. What happens when we
have multiple videos?
Well, that’s interesting...
22. Multiple videos?
• When might we have multiple videos?
• Playlists
• Ads (as much as we hate them)
• Let’s use multiple video elements!
• It seems so simple...
24. You see...
• Each video element object requires a user
interaction to begin playback
• So we can’t auto-advance our playlist
• And we can’t play an ad and then start the
video
25. So...uh...
• No big deal; let’s just change the src
attribute of the <video> tag!
• Now let’s call load() again
• ...as we have no choice...
26. What Happen?
• iOS requires a delay
• Yes, I’m serious
• Android loads an entirely new player
• Have fun with the back button!
27. Missing Events
• HTML5 spec defines a ton of events
• “progress” is a great one
• Dispatched when the user agent is
fetching media data
• But not on iOS
• We’ll get around this in the demo!
28. The Laundry List
• Desktop Webkit ignores preload attribute
• Desktop Webkit doesn’t support poster attribute
• iOS overlay play button is tied to native controls
• iOS full screen gesture tied to native controls
29. More Laundry
• No autoplay on devices
• Can’t create video elements dynamically on iOS
• Android emulator sucks!
• It doesn’t play video
• No software volume controls.
31. “No Full Screen”
• Good news:
• Some vendors are doing it anyway
• We’ll see this in the code too...
• Better News:
• The HTML5 spec will likely have to include
this feature before the final version.
32. Good news, everybody!
We know about these issues, so we can do
our best to work around them!
