jQueryUI and HTML5 Video Play Nice

1,941 views
1,837 views

Published on

My presentation from jQuery Conference Boston 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,941
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide





































  • jQueryUI and HTML5 Video Play Nice

    1. 1. jQueryUI and HTML5 Video Play Nice October 16, 2010 jQuery Conference Boston 2010 Brian Crescimanno Principal Software Engineer, Brightcove
    2. 2. Hooray 1.4.3 & Mobile! Congrats to the jQuery Team!
    3. 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. 4. Keynote is fine... ...and so are my super plain slides!
    5. 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. 6. So...how we doing? • HTML5 video is being adopted pretty quickly...mostly. • All major browsers except IE • IE9 adds support • But...
    7. 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. 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. 9. Let’s not get worked up (We can talk codecs after the session if you want)
    10. 10. Some Good News! • The spec is pretty damn good (mostly)! • Not so good: it isn’t usually fully implemented
    11. 11. This? This too? So what’s a “device?” Hrmm... Hopefully not this...
    12. 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. 13. But What Else?
    14. 14. Other “devices” • Connected TVs • GoogleTV • Boxee Box, Roku Box, etc. • HTPC, PS3, Xbox 360, Wii • Not-so-smart phones • Netbooks, Other tablets
    15. 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. 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. 17. There are “Issues” • Not all implementations are complete • Not all implementations are equal • No implementations are bug-free
    18. 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. 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. 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. 21. What happens when we have multiple videos? Well, that’s interesting...
    22. 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. 23. Nope!
    24. 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. 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. 26. What Happen? • iOS requires a delay • Yes, I’m serious • Android loads an entirely new player • Have fun with the back button!
    27. 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. 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. 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. 30. And sometimes... The spec gets something wrong! (Or at least “wonky”)
    31. 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. 32. Good news, everybody! We know about these issues, so we can do our best to work around them!
    33. 33. So let’s build something! And let’s use jQueryUI
    34. 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

    ×