Bringing HTML5 Video to Mobile Devices

5,907 views
5,854 views

Published on

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

No Downloads
Views
Total views
5,907
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bringing HTML5 Video to Mobile Devices

  1. 1. Bringing HTML5 Video to Mobile Devices <ul><li>Brian Crescimanno </li></ul><ul><li>Principal Software Engineer, Brightcove </li></ul><ul><li>Open Video Conference, 10/1/2010 </li></ul>
  2. 2. Overview <ul><li>Brightcove “Smart Players” </li></ul><ul><li>Device Detection </li></ul><ul><ul><li>Gaps in what’s available </li></ul></ul><ul><ul><li>How we overcame those gaps </li></ul></ul><ul><li>Device specific nonsense </li></ul>
  3. 3. Smart Players: What? <ul><li>Single publishing code – all platforms </li></ul><ul><li>Brightcove does device & capability detection </li></ul><ul><li>Deliver “best possible” experience. </li></ul>Examples: Google Nexus One with Flash 10.1 Player Version: Flash Motorola Droid with Flash Lite Player Version: HTML
  4. 4. Smart Players: Styling <ul><li>Customize your player once; run anywhere </li></ul><ul><li>Let’s see some examples… </li></ul>
  5. 5. Smart Players: Flash Example
  6. 6. Smart Players: HTML Example
  7. 7. Smart Players: Customized Flash Example
  8. 8. Smart Players: Customized HTML Example
  9. 9. What’s Missing? <ul><li>Volume Control </li></ul><ul><ul><li>iOS does not allow JavaScript to control volume </li></ul></ul><ul><li>Full Screen Control </li></ul><ul><ul><li>HTML5 standard does not offer full screen solutions </li></ul></ul><ul><ul><li>Rumors that iOS will add methods for full screen </li></ul></ul><ul><ul><li>(fingers crossed!) </li></ul></ul><ul><li>Menu & Sharing Links </li></ul><ul><ul><li>… not implemented yet; coming soon! </li></ul></ul>
  10. 10. Knowing What to Display <ul><li>Flash Detection is pretty mature </li></ul><ul><ul><li>Careful with Flash 10.1 though… </li></ul></ul><ul><ul><li>First version to use form 10.1.xx </li></ul></ul><ul><ul><li>All prior versions: 9.0.xx, 8.0.xx, 7.0.xx, etc. </li></ul></ul><ul><li>We have 4 “experiences” </li></ul><ul><ul><li>Flash Player </li></ul></ul><ul><ul><li>HTML5 Player </li></ul></ul><ul><ul><li>Flash Installer </li></ul></ul><ul><ul><li>Flash Install Image (Yikes!) </li></ul></ul>
  11. 11. HTML5 Detection <ul><li>HTML5 Detection…not so mature </li></ul><ul><li>HTMLVideoElement#canPlayType </li></ul><ul><ul><li>“ probably” </li></ul></ul><ul><ul><li>“ maybe” </li></ul></ul><ul><ul><li>“” </li></ul></ul><ul><ul><li>Really? Really?! </li></ul></ul><ul><li>Android always returns an empty string; despite H.264 support! </li></ul><ul><li>Forces falling back to reading the UA String. </li></ul><ul><li>FAIL! </li></ul>
  12. 12. HTML5 Detection Continued <ul><li>Could detect other “android” quirks </li></ul><ul><ul><li>Q: How is that better? </li></ul></ul><ul><ul><li>We feel ok; we’re adding support not removing </li></ul></ul><ul><ul><li>But we’re not happy about it! </li></ul></ul><ul><li>What else? </li></ul><ul><ul><li>In our case, support for HTML5 <canvas> tag </li></ul></ul><ul><ul><li>… and SVG </li></ul></ul>
  13. 13. Other Tidbits of fun… <ul><li>iOS and Android both require HTMLVideoElement#load() </li></ul><ul><ul><li>HTML5 spec states play() should “load the media resource…” </li></ul></ul><ul><li>Easy enough, right? </li></ul><ul><li>What happens when we have multiple videos; such as a playlist? </li></ul><ul><li>Well; it’s interesting… </li></ul>
  14. 14. Dealing with Playlists 101 <ul><li>We’d like to use multiple video elements </li></ul><ul><ul><li>Several problems with this approach; notably on iOS: </li></ul></ul><ul><ul><li>Each video element requires user interaction to start </li></ul></ul><ul><ul><li>No auto-advance! </li></ul></ul>
  15. 15. Dealing with Playlists 101 <ul><li>Ok, let’s change the src property! </li></ul><ul><ul><li>That’s cool... </li></ul></ul><ul><ul><li>Better call load() again! </li></ul></ul>
  16. 16. Ineffective! <ul><li>Uh oh! It didn’t work! </li></ul><ul><li>iOS requires a delay between changing the src and calling load </li></ul><ul><li>Weird, huh? </li></ul><ul><li>And how about our friendly, neighborhood Android? </li></ul><ul><li>Some devices: loads a new video player for each video. </li></ul>
  17. 17. And what about ads? <ul><li>Remember, we can’t use multiple video elements… </li></ul><ul><li>Want a mid-roll ad? </li></ul><ul><ul><li>Multiple video elements solves this gracefully </li></ul></ul><ul><ul><li>Each element maintains its own state </li></ul></ul><ul><ul><li>Too bad—we have to maintain it ourselves! </li></ul></ul>
  18. 18. Wait…it gets worse! <ul><li>And if you don’t support Apple HTTP Live Streaming… </li></ul><ul><ul><li>Mid-rolls are out of the question! </li></ul></ul><ul><ul><li>Have to re-download content </li></ul></ul>
  19. 19. We’d like the events please! <ul><li>What if we want a buffered region in our playhead? </li></ul><ul><ul><li>Simple! Use the PROGRESS event; that’s what it’s there for! </li></ul></ul>
  20. 20. Well, I mean…uh… <ul><li>It’s not there in iOS </li></ul><ul><ul><li>It’s among a list of the events defined in the spec not included </li></ul></ul><ul><ul><li>ARG! </li></ul></ul>
  21. 21. So we work around that too! <ul><li>Pretty ingenious hack! </li></ul><ul><ul><li>Sad to say, it’s not my own.  </li></ul></ul><ul><ul><li>Kudos to the guys at Hot Studio </li></ul></ul><ul><ul><li>Watch for duration change </li></ul></ul><ul><ul><li>Poll for start and end time until end time equals duration </li></ul></ul><ul><li>Very cool, but you know what… </li></ul>
  22. 22. Wow! Already! <ul><li>We’re already resorting to hacks. </li></ul><ul><li>That kinda sucks! </li></ul>
  23. 23. And we’re not done <ul><li>Desktop WebKit buffers automatically no matter what </li></ul><ul><ul><li>Makes “poster” attribute useless </li></ul></ul><ul><li>iOS overlay play button is tied to turning on browser-based controls </li></ul><ul><li>iOS full screen video gesture is tied to turning on browser-based controls </li></ul><ul><li>No autoplay on devices </li></ul><ul><ul><li>We found a way. </li></ul></ul><ul><ul><li>We won’t do it. </li></ul></ul><ul><li>Can’t create video element dynamically on iOS </li></ul><ul><li>Android Emulator won’t play video </li></ul>
  24. 24. All of this and… <ul><li>Let’s not get started on codecs! </li></ul><ul><li>(Because there’s a presentation on that hot mess tomorrow) </li></ul><ul><li>(And WebM will probably save the world anyway) </li></ul>
  25. 25. Are you reading my titles? Hi, Mom! <ul><li>Long story short… </li></ul><ul><li>HTML5 Video Player support is disparate, at best, across devices and platforms. </li></ul>
  26. 26. But you know what? <ul><li>We’re professionals; this is what we do. </li></ul><ul><li>Beyond that… </li></ul><ul><li>We’re engineers ! </li></ul><ul><ul><li>Solving problems that require us to get creative makes us tick! </li></ul></ul><ul><ul><li>And we get to work on the aptly named “bleeding edge.” </li></ul></ul>

×