My presentation from jQuery Conference Boston 2010

1. jQueryUI and HTML5
Video Play Nice
October 16, 2010
jQuery Conference Boston 2010
Brian Crescimanno
Principal Software Engineer, Brightcove

2. Hooray 1.4.3 & Mobile!
Congrats to the jQuery Team!

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!)

4. Keynote is fine...
...and so are my super plain slides!

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!

13. But What Else?

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

18. An Example
• HTMLVideoElement#canPlayType
• Android doesn’t know how cool it is!
• So we end up falling back to checking for
android specifically. Kinda lame.

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...

23. Nope!

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.

30. And sometimes...
The spec gets something wrong! (Or at least “wonky”)

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!

33. So let’s build
something!
And let’s use jQueryUI

37. Make it better
• Code (will be) on GitHub
• Ideas:
• Companion playlist widget
• Fix “poster” for the desktop
• Add flash fallback
• Custom paused overlay
• Social sharing links