Your SlideShare is downloading. ×
HTML5 - moving beyond Flash & Silverlight
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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. The Migration Path to HTML5Moving beyond Flash and SilverlightJan Petzold │Deutsche Welle, New Media
  • 2. Deutsche WelleJan Petzold │Deutsche Welle, New Media
  • 3. IntroductionJan Petzold │Deutsche Welle, New Media
  • 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. 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. DW Audio and video productsJan Petzold │Deutsche Welle, New Media
  • 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. Audio and video portfolioPlayers on DW website and partner websitesJan Petzold │Deutsche Welle, New Media
  • 9. Audio and video portfolioSpecials - Examples: Global Ideas, Future Now, Coming Home http://expedition-heimat.dw-world.deJan Petzold │Deutsche Welle, New Media
  • 10. Why HTML5?Jan Petzold │Deutsche Welle, New media
  • 11. Jan Petzold │Deutsche Welle, New Media
  • 12. Jan Petzold │Deutsche Welle, New Media
  • 13. Jan Petzold │Deutsche Welle, New Media
  • 14. Jan Petzold │Deutsche Welle, New Media
  • 15. Jan Petzold │Deutsche Welle, New Media
  • 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. 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. 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. But…?Jan Petzold │Deutsche Welle, New Media
  • 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. 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. MobileJan Petzold │Deutsche Welle, New Media
  • 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. 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. Creating HTML5Jan Petzold │Deutsche Welle, New Media
  • 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. 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. 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. 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. 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. Q&AJan Petzold │Deutsche Welle, New Media
  • 32. Thanks a lot! Jan Petzold Deutsche Welle Mail: Jan.Petzold@dw-world.deJan Petzold │Deutsche Welle, New Media