Your SlideShare is downloading. ×
0
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
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

Bringing HTML5 Video to Mobile Devices

5,775

Published on

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

No Downloads
Views
Total Views
5,775
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×