HTML5 - moving beyond Flash & Silverlight


Published on

My presentation at Streaming Media Europe 2011 in London covering the current status of HTML5 for online audio/video usage

Published in: Technology
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 - moving beyond Flash & Silverlight

  1. 1. The Migration Path to HTML5Moving beyond Flash and SilverlightJan Petzold │Deutsche Welle, New Media
  2. 2. Deutsche WelleJan Petzold │Deutsche Welle, New Media
  3. 3. IntroductionJan Petzold │Deutsche Welle, New Media
  4. 4. Deutsche WelleFacts and figures - Germany’s international broadcaster, founded in 1953 - Global reach of more than 86 million weekly listeners and viewers - Studios in Brussels, Washington and Moscow - Around 1,500 employees from more than 60 countries - More than 5.000 partners - 1,000 journalists, technicians and managers educated by DW-AKADEMIE each yearJan Petzold │Deutsche Welle, New Media
  5. 5. Deutsche WelleMission - DW is journalistically independent - DW provides extensive and uncensored information to countries in which freedom of the press is restricted or nonexistent - DW is a mediator in intercultural dialogJan Petzold │Deutsche Welle, New Media
  6. 6. DW Audio and video productsJan Petzold │Deutsche Welle, New Media
  7. 7. Audio and video portfolioDW MediaCenter - All audio and video items are accessible in one interface - Available in English, German and Arabic (planned: Spanish, Farsi, Russian) http://mediacenter.dw-world.deJan Petzold │Deutsche Welle, New Media
  8. 8. Audio and video portfolioPlayers on DW website and partner websitesJan Petzold │Deutsche Welle, New Media
  9. 9. Audio and video portfolioSpecials - Examples: Global Ideas, Future Now, Coming Home http://expedition-heimat.dw-world.deJan Petzold │Deutsche Welle, New Media
  10. 10. Why HTML5?Jan Petzold │Deutsche Welle, New media
  11. 11. Jan Petzold │Deutsche Welle, New Media
  12. 12. Jan Petzold │Deutsche Welle, New Media
  13. 13. Jan Petzold │Deutsche Welle, New Media
  14. 14. Jan Petzold │Deutsche Welle, New Media
  15. 15. Jan Petzold │Deutsche Welle, New Media
  16. 16. HTML5 advantagesWater taps ≠ standard, but HTML5 is! (well, almost) - Currently draft status at W3C ( but already widely used - The “product” doesn’t belong to anyone, individual implementation - All current releases of the major browsers support HTML5 - Far better accessibility (SEO) compared to Flash/Silverlight - Layout may be adjusted inside the browser (text size, back button, etc.) - No need to install a plugin, open source audio/video codecs (WebM & OGG) - Better integration with Javascript and CSS - Native browser functions increase browser stability - Great perspective (Windows 8, PhoneGap, etc.)Jan Petzold │Deutsche Welle, New Media
  17. 17. HTML5 advantagesMajor companies are embracing HTML5 - Apple: (device support, showcase) - Microsoft: (German HTML5 training) - Adobe: (HTML5 extension pack for Dreamweaver) - Google: (HTML5 presentation built in HTML5) - Facebook: (using HTML5 on Facebook, e.g. video players) © adobe.comJan Petzold │Deutsche Welle, New Media
  18. 18. HTML5 capable browsers - market shareW3C statistics vs. DW statistics (August 2011) W3C DW IE 9 Firefox 6,5,4,3.5 Safari IE 9 Firefox 6,5,4,3.5 Safari Opera IE 8,7,6 Firefox 3,2,1 Opera IE 8,7,6 Firefox 3,2,1 Sources: / DW internal statisticsJan Petzold │Deutsche Welle, New Media
  19. 19. But…?Jan Petzold │Deutsche Welle, New Media
  20. 20. HTML5 disadvantages - “Old” browsers (<IE 9, <Firefox 3.5) don’t support HTML5 - Different browser implementations for audio/video (AVC vs. WebM vs. Theora vs. AAC vs. MP3) - No standards for streaming - No support for DRM (see - No fullscreen mode for browsers (except Webkit) - Performance of Flash/Silverlight apps is still generally better than HTML5 (example: Bitmap Data) - Lack of decent IDEs and workflow tools (compared to Adobe CS and Microsoft Expression)Jan Petzold │Deutsche Welle, New Media
  21. 21. HTML5 disadvantagesDifferent browsers = different video formats - No consistent browser Browser / platform MP4 WebM support for a single format, mainly related to Firefox 3.5+ patent issues +Theora - Unlikely to change soon Internet Explorer 9 Plugin available - iOS and Android (3.0+) support HTTP Live Streaming, but no Google Chrome deprecated desktop browser does Apple Safari - Audio - same situation: - MP4 (AAC) iOS 5 - OGG - MP3 Android 2.3.3+Jan Petzold │Deutsche Welle, New Media
  22. 22. MobileJan Petzold │Deutsche Welle, New Media
  23. 23. Mobile sales vs. PC sales PC sales (includes Smartphone salesdesktop, notebook, netbook, but not tablets) Source: Gartner Jan Petzold │Deutsche Welle, New Media
  24. 24. Mobile devicesHTML5 on mobile devices - HTML5 is supported on all current Smartphone OS - Silverlight and Flash rarely supported - RTSP support on all platforms in theory, but depends on mobile service provider - Progressive download is (practically) the only reliable option - iOS & Android (3.0+) support HTTP Live Streaming: - Former “unwritten laws” for mobile devices don’t really exist anymore (small screen, low resolution, slow processor, etc.)Jan Petzold │Deutsche Welle, New Media
  25. 25. Creating HTML5Jan Petzold │Deutsche Welle, New Media
  26. 26. HTML5 DevelopmentTools and Examples - For coding, use the same tools you would use for HTML (Dreamweaver, Aptana, etc.) - For animations via GUI: - Adobe Edge - Sencha Animator - Tumult Hype - Code “quality” leaves room for improvement Adobe Edge - Animations are slower compared to Flash, but Javascript compilers get faster in every browser release (Chrome)Jan Petzold │Deutsche Welle, New Media
  27. 27. Creating HTML5Audio and Video encoding - H.264/AAC is supported by almost any product on the market - WebM (VP8/OGG Vorbis) is supported widely (e.g. Squeeze, Zencoder, flumotion, …) see full list at - For best compatibility: choose AVC Baseline profile (works with HTML5 / Flash / Silverlight and old iPhones / iPods, add WebM for HTML5 compatibility - DW uses various tools (Carbon Coder, FlipFactory) for encoding - Carbon Coder still doesn’t support WebM Encoding stuff… format - VP8 encoding is quite slow compared to H.264 – will improve Ian HamptonJan Petzold │Deutsche Welle, New Media
  28. 28. Creating HTML5Audio and Video playback - Several frameworks / platforms: Kaltura, JW, popcorn.js, Microsoft Framework, etc. - DW has own video player – main reasons: flexibility, CMS integration, changes in video delivery/formats, exchange Flash/HTML5, custom layout & appearance - Current implementation is a mix between Flash and HTML/Javascript:Jan Petzold │Deutsche Welle, New Media
  29. 29. Creating HTML5HTML5 markup - Lots of tutorials, example: - I recommend to use SWFObject to detect browser flash capabilities via Javascript - Code example:<object width="640" height="360" type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="quality" value="high" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <video width="640" height="360" controls> <source src="video.mp4" /> <source src="video.webm" type="video/webm" /> </video></object>Jan Petzold │Deutsche Welle, New Media
  30. 30. HTML5 DevelopmentActionScript and Javascript - Roots are the same – ECMAScript (ISO/IEC 16262), ActionScript is a dialect of JavaScript - ActionScript 3 is OOP, Javascript is … somehow OOP - For audio/video handling, see these examples: Command ActionScript 3.0 JavaScript Start a video;; Seek to time 25s; video.currentTime = 25; var nsClient:Object = new Object(); nsClient.onMetaData = myHandler; ns.client = nsClient; Get the duration video.duration; function myHandler(info:Object):void { duration = info.duration; } var s:SoundTransform = new SoundTransform(); Set the volume to 80% s.volume = 0.8; video.volume = 0.8; ns.soundTransform = s;Jan Petzold │Deutsche Welle, New Media
  31. 31. Q&AJan Petzold │Deutsche Welle, New Media
  32. 32. Thanks a lot! Jan Petzold Deutsche Welle Mail: Jan.Petzold@dw-world.deJan Petzold │Deutsche Welle, New Media