Video Encoding for Producers

Transcription

1 Video Encoding for Producers Jan Ozer Shameless Plug Most information in this presentation is derived from this book. For more information, check out the book Published, April 2013 Available Amazon/iBookstore

2 Agenda H.264 what you need to know Playback requirements for computer/mobile Benefits and limitations of HTML5 Introduction to adaptive streaming Distributing to desktop and mobile viewers What is H.264? High quality compression technology Plays almost everywhere Computers Flash, QuickTime, Silverlight Via HTML5 (Chrome, IE9, Safari, NOT Firefox, Opera) Mobile plays natively on all mobile devices

3 What is H.264? Adapted by ISO and ITU Telephony/cellular TV - consumer electronics Computer electronics Only codec adopted by top three streaming providers (Apple, Adobe, Microsoft) Streamcrest Associates H.264 Encoding - Basics Profiles/Levels Most critical compatibility-related setting Encode using wrong profile, file won t play Profile/level selection is available on all encoding tools

4 What are H.264 Profiles? Define a set of coding tools or algorithms that can be used in generating a bitstream Why Do Profiles Exist? Meeting point for hardware vendor and video producer Example: Original video capable ipod is baseline only: why? Lower power (cheaper) CPU Less power consumption Video producer: to produce that will play on ipod, use Baseline profile

5 Rule Number 1 Don t exceed profile of target device Exclusively a concern with mobile Computers can play High profile (any level) Required Profiles for idevices Original ipod (to-5g) ipod nano/ classic/ ipod touch/iphone to V4 iphone 4 /ipod touch 4/ ipad 1&2 iphone 4S IPhone 5/ New ipad iphone 5C iphone 5S/ ipad Air/iPad Mini Video codec H.264 H.264 H.264 H.264 H.264 H.264 Profile/level Baseline to Level 1.3 Baseline to Level 3.0 Main to Level 3.1 High to Level 4.1 High to Level 4.1 High to level 4.2 Max video data rate 768 kbps 2.5 Mbps 14 Mbps 50 Mbps 62.5 mbps 62.5 mbps Max video resolution 320x x p 1080p 1080p 1080p Frame rate 30 fps 30 fps 30 fps 30 fps 30 fps 60 Audio codec AAC-LC AAC-LC AAC-LC AAC-LC AAC-LC AAC-LC Max audio data rate 160 kbps 160 kbps 160 kbps 160 kbps 160 kbps 160 kbps Audio params 48 khz, stereo 48 khz, stereo 48 khz, stereo 48 khz, stereo 48 khz, stereo 48 khz, stereo Four Six playback classes (4 really) Must configure video appropriately to play on target

6 Required Profiles for Android These recommendations are least common denominator software-only playback Most devices probably more capable (no table because too many manufacturers) For 100% compatibility, use these Profiles and Playback Compatibility Profile PreiPhone 4 Android 3.0 Software Android Hardware ipad 1 iphone 4-5 ipad 2/3 PCs/ note books Baseline Yes Yes Yes Yes Yes Yes Yes Yes Main No No? Yes Yes Yes Yes Yes High No No? No Yes Yes Yes Yes OTT Using the wrong profile produces a file incompatible with your target Need to know profile of target device and choose appropriate profile

7 What are H.264 Levels? Constrains key parameters in the bitstream H.264 Levels-Devices Critical not to exceed level of target device Devices won t load file encoded beyond max supported level So, make sure encoding parameters don t exceed level (most templates do this)

8 H.264 Levels Desktop All players can play up to 1080p at maximum level Typically not important for computer playback Choosing a Delivery Technology All platforms Must use a supported codec (H.264 is universal, either in the browser, via Flash or both) Supported delivery technology (e.g. Flash) Correct container format/metadata, so it plays in the target player Two scenarios: Single video file, progressive download - easy If you need adaptive, live, DRM or captions, choosing a path is much more challenging - hard

9 Distributing Single Files Desktop Flash (97% penetration) HTML5 with Flash fallback Mobile 100% playback of HTML5/H.264 Why not just use Flash for Desktops? Many, many producers do But, many use HTML5 for mobile Easy to use that for desktop as well Files load and play a bit faster No chance of plug-in failure Can fallback to Flash for browsers that don t support HTML5

10 Understanding the HTML5 Playback Environment HTML5 introduction Desktop HTML5 penetration HTML5 codec support Mobile HTML5 Overview HTML5 s key benefit Death to plug-ins everywhere (particularly Flash) How it works Instead of obtaining decoders for H.264 and other codecs in plug-ins Browsers supply players and decoders Use <Video> tag in HTML to call player

11 Desktop: HTML5 Operation For video tag to work: 1. Browser must be HTML5 compatible 2. Browser must supply appropriate decoder Two key markets Desktop Mobile HTML5 Browsers on Desktops Not HTML5 Comp So, at best, HTML5 is 72.35% of the market on desktops

12 Desktop: Conclusion 1 Any HTML5-only desktop strategy won t reach 27% of viewers Granted, probably concentrated in corporate, governmental and older consumers Still, all producers implementing HTML5 on the desktop should fallback to Flash Ensures more comprehensive coverage Doesn t cost you anything Desktop: Conclusion 2 There are two HTML5 codecs, H.264/WebM H.264 camp IE, Safari, Chrome Firefox/Opera don t play H.264 without plugin WebM camp - Firefox, Chrome, Opera IE/Safari don t play WebM without plugin Conclusion 2 For maximum HTML5 compatibility, should encode to both H.264 and WebM

13 HTML5: Mobile The good news is: Virtually all smartphones/tablets are HTML5 compatible All play H.264 So, if you deliver H.264 video using the HTML5 tag, virtually all smartphones/tablets should be able to play your videos Implementing HTML5 Requirements H.264/WebM encoded video And Flash fallback (to H.264 video) Many producers forgo WebM and serve Firefox/Opera with Flash

14 Producing H.264 for HTML5 Playback Specifications Video codec Profiles Audio codec Container formats H.264 ONLY, not MPEG-4 Baseline, Main, High AAC, AAC-LC, HE-AAC, HE-AACv2 MP4 (otherwise, may call a different player) MP4 files are best container format Works for HTML5 on mobile and desktop, plus Flash About Flash Fallback What is Flash Fallback Video tag presented first; if browser understands (and supports codec), video plays If browser doesn t understand, Flash playback coding is provided Plays H.264 file

15 What s This Look Like H.264 WebM Flash Implementing HTML5 with Flash Fallback Manual coding Absolutely can encode files separately and create HTML code manually Sorenson Squeeze 9 Can produce both files and HTML code automatically Squeeze makes it very simple See tutorial up on Streaming Media website bit.ly/squeeze_html5

16 Best Implementation Sorenson Squeeze 9 Presets create both WebM and H.264 files All necessary HTML code Just encode/upload Test bit.ly/what_dis Squeeze Demonstration Test playback yourself at bit.ly/html5_whatley

17 My Tests Toshiba Thrive Android ipad iphone IE 10 H.264 Google Chrome H.264 Firefox WebM HTML5 Limitations No true streaming (all progressive download) No live streaming No adaptive streaming Incomplete closed captioning No digital rights management

18 Optimal Single File Strategy HTML5 with Flash Fallback HTML5 to all mobile devices HTML5 to all computers running HTML5 compatible browsers Fallback to Flash for non-html5 compatible browsers Can encode WebM & H.264 for optimal support Encode H.264 only and have Mozilla/Opera play Flash Scenario 2- When HTML5 Won t Do When you need: Adaptive streaming, live streaming, DRM, captioning You need an advanced technology, lumped into the term adaptive streaming

19 Intro to Adaptive Streaming What it is How the various alternatives work RTMP (server-based) HTTP (no server) ID existing technologies Transmuxing What is Adaptive Streaming? One stream in, multiple streams out (live and VOD) Streams switched transparently to adapt to factors like: Changing delivery bandwidths (avoid hard stops) CPU utilization at client (avoid frame drops)

20 Key Benefits Match stream quality to connection and playback platform used by viewer Mobile Desktop OTT Adaptive Streaming Alternatives Flash HLS Smooth Streaming DASH HTML5 Protocol RTMP/ HTTP HTTP HTTP HTTP HTTP Adaptive streaming Dynamic Yes Yes Yes DASH Streaming Live streaming Yes Yes Yes Yes DASH DRM Yes Yes Yes Yes DASH Closed captions Yes Yes Yes Yes DASH

21 Choosing an Adaptive Streaming Technology Features all very similar Consider: Where does it play (and how) Protocol Targeting Desktops Three approaches: Browser-based playback No adaptive streaming technology works yet This is where DASH is supposed to fill in (but not implemented yet) Plug-in (like Flash) Player or plug-in that depends upon Flash

22 Targeting Desktops Native player Flash-based alternative Flash Flash Player Smooth HTML5 HLS DASH Streaming Silverlight NA NA NA Flash penetration is still the most comprehensive Flash or technologies that leverage the Flash Player are still the best Other alternatives: applications/plug-ins E.g. Microsoft s Smooth Streaming plug-in for Flash NA (OSMF plugin) Plugin/Player + Flash Player Player/P lug-in Penetration 96% 70%/96% 70% 96%? Desktop Bottom Line? Flash or HLS Use OSMF plug-in/jw Player in website So long as Flash is installed, will play HLS streams One set of streams for desktop and mobile

23 Mobile Two scenarios Browser-based App-based Targeting Mobile-Browser ios Android Android Share 100% ~ 31% ~69.% HLS playback 100% 0% 100%* Flash playback 0% 100% unknown but * dropping * Issues with HLS playback Some producers go with HLS only Forget about older Android Some go with HLS for ios/newer Android and single RTSP stream for older Android

24 Or, Create OS specific apps If you can convince your viewers to download apps, you can use any technology AIR (Flash) Smooth DASH App - Pros Can use any technology Can customize playback environment App Cons Have to convince users to download Expensive Adobe Primetime Premium product that enables one technology/ DRM pairing to serve multiple targets On computers, it s a library that works with Flash Player Adds HLS playback for computers (so HLS can be a single format solution) Includes SDKs for ios/android Android SDK includes HLS stack that provides ubiquitous HLS playback in Android SDKs for OTT coming

25 Adaptive Summary Easy (need dual format encoding): Flash for desktop, HLS for ios/android 3.0+ Easy (single format encoding, but some simple programming): HLS for desktop, ios and Android 3.0+ Need player like JW Player or OSMF plug-in for desktop computers to play Flash Hardest (single format encoding, but expensive programming/marketing) Flash on desktop and completely custom approach on mobile via apps Could use any technology, including Smooth, HLS, DASH Most expensive Adobe Primetime Single File Summary Single file playback HTML5 with Flash Fallback Encode WebM to play natively in Firefox/Opera Encode H.264 onlyl with fallback to Flash for those browsers

26 Questions