HTML5 Video Full Throttle
( or how I learned to stop worrying and love html5 web video )
SF | 2012
Lead Front End Architect
Promise of HTML5
Harmonic Vendor Collaboration
Cross vendor innovation; shared for the good of the web
Unified platform for cross device; cross platform rich media experiences
Performance comparable to Native Applications
CSS and hardware accelerated rendering pipelines
New features; and avoiding nightmare of supporting out-dated fragmented platforms
The Reality of HTML5?
Inconsistent spec buy-in
Roadmap for browser vendors not very clear, often until its too late
Write many per-platform hacks
Middle-ware needed to bridge platform gaps
Native apps are necessary for performance on mobile; especially games and media
Android 2x is still huge; No IE 10 for Windows Vista etc.
What about HTML5 Video?
All of HTML5 issues +
Codecs and playback
Not just WebM vs H.264; HLS and alternate adaptive formats ( HLS, SmoothStream, DASH ). ( not to mention content controls )
Display layer inconsistencies
Native vs HTML overly support and weird hybrids.
Playback invocation restrictions ( autoplay )
Thumbnail links; playlists with images, bumper image ads, etc.
Multiple video asset playback inconsistencies
Gapless ads inserts; out of band audio / video sync impossibilities
Know the Platform Limitations
- Platform grades
- Some good resources:
Know Your HTML5 Video Delivery Goals:
- Building a single player or many variations ?
- Embedding into a controlled context or unpredictable ?
- Skinning once; or dozens of times with dynamic color variations ?
- Will platform trade-offs be configurable ?
- Supporting mobile; or both desktop and mobile?
- Supporting plugins; per packaged install or per dynamic configuration ?
- And of course, "fast", "robust" and "maintainable"
For an OVP, Flexibility is Key
cc by ajc1
A player platform, not just a player
An Architexture for flexibility of feature delivery
cc from amysept
Keep your kittens safe in a sandbox!
protects against messy client CSS and JS
Avoid async issues for realtime applications, avoid overhead of postMessage; avoid attribute sync proxy
Embed flexibility: Thumbnails embeds dozens of players in few ms
Work around iOS JS play restriction; sync playback of black video src; async loading of library; iframe and asset metadata
Many ways to Skin an HTML5 player
- Pure CSS based skins are great for providing clients with easy color theming
- Sprite based skins are good for designers that are not css ninjas
- Should be easy to load custom css across configuration contexts
iOS does not support dom overlay fullscreen; depending on your use context and monetization needs you may want native fullscreen vs dom overlay pseudo fullscreen
Apple has a proprietary web extension to opt into supporting web content streamed to your TV
Flash on android is now on its way out, so you may want to use html5 all the time.
Point being; retain configuration flexibility for different use contexts.
How do we make it all Fast!
Aribrary plugin combinations cached on the CDN; ( no pre-building, important with lots of plugin combinations )
Again with iframe cached on CDN; no cache if per-user access controls
Fewer requests over cache miss
We lean towards few requests over long or uniuqe cache times
How do we make it all maintainable
Taking advantage of Desktop HTML5!
Explore the future today!
DOM full screen
Multiple simotanius video/audio playback support
Explore new posibilites: WebRTC video wall
Ask me anything: @michael_dale :)