Your SlideShare is downloading. ×
jQueryUI and HTML5 Video Play Nice
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQueryUI and HTML5 Video Play Nice


Published on

My presentation from jQuery Conference Boston 2010

My presentation from jQuery Conference Boston 2010

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide

  • Transcript

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