jQueryUI and HTML5
Video Play Nice
October 16, 2010
jQuery Conference Boston 2010
Principal Software Engineer, Brightcove
Hooray 1.4.3 & Mobile!
Congrats to the jQuery Team!
• 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!)
Keynote is ﬁne...
...and so are my super plain slides!
Let’s talk <video>
• Part of the HTML5 standard
• Maybe the most exciting part of the actual
• Reduce Flash dependence
• Deliver video to “devices”
So...how we doing?
• HTML5 video is being adopted pretty
• All major browsers except IE
• IE9 adds support
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)
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!
Let’s not get worked up
(We can talk codecs after the session if you want)
Some Good News!
• The spec is pretty damn good (mostly)!
• Not so good: it isn’t usually fully implemented
This? This too?
So what’s a “device?”
Hrmm... Hopefully not this...
• 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!
• 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
• 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...
• iOS requires a delay
• Yes, I’m serious
• Android loads an entirely new player
• Have fun with the back button!
• HTML5 spec deﬁnes 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!
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
• No autoplay on devices
• Can’t create video elements dynamically on iOS
• Android emulator sucks!
• It doesn’t play video
• No software volume controls.
The spec gets something wrong! (Or at least “wonky”)
“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 ﬁnal version.
Good news, everybody!
We know about these issues, so we can do
our best to work around them!
So let’s build
And let’s use jQueryUI
Make it better
• Code (will be) on GitHub
• Companion playlist widget
• Fix “poster” for the desktop
• Add ﬂash fallback
• Custom paused overlay
• Social sharing links