HTML5 video & Amazon elastic transcoder - FCIP August 2014
Pycon2013
1. This Old Video Site: How PBS
streams video - and you can
too!
Edgar Román
PyCon 2013
2. PBS Digital
• We are the online division of the Public Broadcasting Service
• We stream millions videos for both pbs.org and pbskids.org
• Our core projects and video CMS are python based
This talk focuses on streaming video, not python
And streaming video in 2013…
Disclaimer: Reference herein to any specific commercial products, or services
does not necessarily imply its endorsement, recommendation, or favoring by
the Public Broadcasting Service
3. Online Video Goal
One of our goals at PBSd is to make PBS video
accessible everywhere,
by everyone
This goal affects how we stream video, and
your goals will affect how you stream online video
4. Video Formats
• 1994 - MPEG-2
– Used by Digital Television and DVD
– Lossless format, big files
• 2003 - MPEG-4 with H.264 (AVC)
– MPEG-4 is the container format and H.264 is the
video codec
– Lossy format, much smaller files
– More complex to decode
• Ogg Vorbis/WebM VP8/Other
– Now you’re in the niche video formats
– Great if you can narrow your audience
5. MPEG-4 with H.264
• Success driven by broad support
– Flash support since 9.115
– SilverLight, Windows, Xbox, PS3, Android, iOS
• Excellent compression
• Huge number of options
– Standard Profiles: Baseline vs Main vs High
• But there is a shadow over H.264
– MPEG-LA licensing fees
– ‘Free to end users’
6. Video Streaming
• HTTP
– Good ol’ progressive download
• RTMP
– Proprietary from Adobe
• HTTP Live Streaming (HLS)
• Others
– RTSP
– MS Smooth Streaming
– HTTP Dynamic Streaming
– DASH
7. Video Playback
• Player Requirements
– Plays Ads
– Closed Captioning Support
– Customizable (Twitter, Facebook, Buy DVD /
iTunes)
• Using combinations of many players
– Open Source Media Framework (OSMF)
– Custom HTML5 framework
– Native players on mobile devices
8. How to get started with video
• First Target: Desktop browsers
– Picked MPEG4/H.264 to lower file size
– MP4 main profile
– Delivery via RTMP
– Broad support in Flash players
– Started with 400Kbps in 2009
– Expectation now is in range of 800Kbps to 1.2Mbps
9. S3 Amazon
Cloudfront
MP4 Main CDN
Includes Flash
Profile Media Server
Delivery
Via RTMP
10. Mobile Devices
• Apple’s iOS
– No Flash
– HTTP Live Streaming (HLS)
– Auto bitrate adjust possible
– Any old CDN will do
– Built-in player
• Android
– MP4 Baseline via HTTP Progressive download
– Later versions of Android support HLS
• Capability Detection on app servers
11. HLS Encoded iPhone
iPhone
Plain old CDN
serving HTTP files
S3 Amazon Cloudfront
CDN
Includes Flash
Media Server for
delivery via RTMP
12. MP4 Droid
Baseline
iPhone
Plain old CDN
serving HTTP files
iPhone
S3 Amazon Cloudfront
CDN
Includes Flash
Media Server for
delivery via RTMP
13. HTML5 <video> tag
• Allows browser to have native video support
• Basic <video> tag is great, but lacks frills to match rich
Flash environment
• HTML5 frameworks out there:
– VideoJS
– MediaElement
– JWPlayer
• If you need Flash-like flexibility in HTML5, be prepared for
disappointment
– Ad serving
– Captions
– Video Codec support
14. Transcoding
• Act of converting one video format to another
• Useful Tools
Local Machine Online Services
ffmpeg zencoder
x264 Encoding.com
Handbrake
• At PBS we start with a high-resolution 5 Mbps mp4 file
• From this we create 16 streams
http://to.pbs.org/video-specs
15. Editor Uploads Mezzanine File with
caption file
Store Original File in Archive and
send to Transcoding Service
Stage files on CDN Origin Server
and register streams in CMS
Django site determines client video
capabilities and renders links
16. Haxors stealing my stuff
• Tough challenge – see ‘analog loophole’
• PBS offers many videos for free streaming online so
motivation to steal is low
• Your circumstances might be different
• Beware the DRM Graveyard
– http://opensource.com/life/12/7/drm-graveyard-
brief-history-digital-rights-management-video-film-
and-tv
I’m going to present a lot of data and I promise to post the slides online
If you are watching video on pbs.org, then most likely there is a python backend. So the goal of this presentation is to equip you with the knowledge about video streaming that you can plug into your python framework of choice.Viewers from the future, please chuckle at our backward ways and then hop into your self-driving vehicle, pop on your Google Glass and watch your holograms.And the lawyers make me add the text on the bottom
Your video streaming goals will affect your choicesThis goal affects how we stream videoAnd thus this presentation is biasedYour goals will affect how you use online videoBut I hope this talk will assist youAt least with knowing more about optionsYou have many, many options
MPEG-2 – provided a mechanism for the basis of most modern digital video streaming. But in 2003, h264 started a revolution in internet video streamingMuch like mp3 was to WAV files, mp4 is to mpeg2It uses complex math algorithms to enable this compression that I do not pretend to understandThese algorithms require much more horsepower than before to both encode and decodeThere are many other formats that are slowly gaining traction. Some claim to have better compression or video quality, but wide support is not there.If I were a betting man, and I am, I would put my money on VP8 and VP9 in 5 years
One thing about compression and various options support is that some options require high CPU processing power to encode and decode. So it is possible to compress something so much that some players won’t be able to keep up on underpowered hardware.Fortunately, for people like me who cannot pick out ice cream toppings much less video encoding options, some common profiles were established.MPEG-LA requires products that implement h264 pay patent royalites. On August 26, 2010 MPEG LA announced that H.264 encoded internet video that is free to end users will never be charged royalties
Think about Firewalls, Licensing, Player SupportHTTP is best for compatibility, but the worst for bandwidth conservations. Viewers who abandon the video after starting to watch potentially wastes bandwidth. Because PBS has hour and 2 hour long programs, this is a problem for us.RTMP is good for bandwidth conservations, but requires commercial softwareHLS is new, but player support is upcomingTons of other formats that exist, your mileage may vary.
OSMF is roll-your-own. Use Strobe for drop-in player
The base setup if you want just get video online isH.264, Main Profile, via HTTP, and OSMF Strobe Player or HTML5 video tag
Put mp4 videos on S3 and stream RTMP using AWS CloudfrontProsScales wellAdobe FMS cost built into CDNSimplePython support: botoConsSingle bitrateBring your own player
We targetiOS and Android. Sorry windows phone users!Android:Supports Flash … poorlySupports HLS … poorlySupports MP4 playback … adquatelyWurfl, Device Atlas are fine, but lack video playback capability details
Put thousands of chopped up video snippets on S3 and stream HTTP using CDNProsScales wellAny CDN will doMulti-bitrate build into protocolConsFile management (1 hour show - Hard to move all the files if necessaryClosed captioning needed at time of transcoding (baked in)Native player does not support ads
Put baseline MP4 on S3 and stream HTTP using CDNProsScales wellAny CDN will doBaseline ensures wide playabilityConsFiles are biggerYet another transcodingProgressive download wastes bandwidth
Will probably be awesome in 5 years
Store original Mezzanine video and closed captioning file for safekeepingSend to transcoding service to get many different video formatsStore CDN links to all video formats in CMSWhen client hits webpage, detect capabilities of playback deviceDeliver page with Flash first with HTML5 fallback