• Save
HTML5 - moving beyond Flash & Silverlight
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 - moving beyond Flash & Silverlight

on

  • 2,663 views

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

Statistics

Views

Total Views
2,663
Views on SlideShare
2,663
Embed Views
0

Actions

Likes
1
Downloads
3
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 - moving beyond Flash & Silverlight Presentation Transcript

  • 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 (http://dev.w3.org/html5/spec/Overview.html) 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: http://www.apple.com/html5/ (device support, showcase) - Microsoft: http://www.youtube.com/watch?v=SJTyY2csya8 (German HTML5 training) - Adobe: http://www.adobe.com/choice/createwithoutlimits.html (HTML5 extension pack for Dreamweaver) - Google: http://slides.html5rocks.com (HTML5 presentation built in HTML5) - Facebook: https://www.facebook.com/note.php?note_id=438532093919 (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: http://www.w3schools.com/browsers/browsers_stats.asp / 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 http://www.w3.org/Bugs/Public/show_bug.cgi?id=10902) - 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: http://developer.android.com/sdk/android-3.0-highlights.html - 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 http://www.webmproject.org/tools/ - 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: http://camendesign.com/code/video_for_everybody - 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 ns.play(); video.play(); Seek to time 25s ns.seek(25); 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