HTML5 and video
Download as PPTX, PDF0 likes1,221 views
HTML5 provides native support for playing video in the browser without plugins. However, browser support for different video formats is inconsistent, with H.264, Ogg, and WebM being the main cross-platform options. While the technology is maturing, video backends still need to support multiple formats to ensure compatibility across browsers. HTML5 video is establishing itself, but proprietary formats have not been fully replaced yet. Developers should be prepared to implement HTML5 video with Flash fallback for now.
HTML5 and video
- 1. HTML5 and VideoBas ZoetekouwBas.zoetekouw@surfnet.nl
- 2. HTML5 VideoReport published (jan 2011)HTML5 Video: current statusby Herman van Dompseler and Bas ZoetekouwDownload athttp://www.mediamosa.org/content/html5-video-current-situationSURFnet - We make innovation work1
- 3. SURFnet - We make innovation work2What is HTML5?HTML 2.0: 1995HTML 3.2: 1997HTML 4.0: 1998XHTML 1.0: 2000XHTML 1.1: 2001……HTML5: 201x
- 4. SURFnet - We make innovation work3What is HTML5?HTML5 ≈ HTML + CSS + JSIntegrates multimedia:2D & 3D drawing (Canvas, WebGL) Audio and video playbackNative SVG supportNew semantic elements: <nav>, <footer>, <figcaption>, <section>Lots of other useful features:GeolocationPersistent offline storage (blob, SQL)Multithreaded JS (“web workers”)Web fontsExtensive overview:http://slides.html5rocks.com/
- 5. HTML5: possibilitiesLimitless possibilities!WebappsGamesMultimediaSURFnet - We make innovation work4
- 6. HTML5 gamesSURFnet - We make innovation work5
- 7. Video: before HTML5<object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/qiD93UxvHRw?fs=1&hl=nl_NL"> </param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/qiD93UxvHRw?fs=1&hl=nl_NL” type="application/x–shockwave–Flash” allowscriptaccess="always”allowfullscreen="true" width="640" height="385"> </embed></object>SURFnet - We make innovation work6
- 8. HTML5 and VideoSupport for playing video directly from the browser<video id="movie" width="320" height="240" preload controls> <source src="MY_MOVIE.mp4" /> <source src="MY_MOVIE.webm" type='video/webm/></video>No plugins requiredRendering of video is responsibility of the browserVideo fully accessible from Javascript/DOMStyling using CSSSURFnet - We make innovation work7
- 9. Why HTML5-based video?Easy & cleanOpen standardCross-platformNo more plugins!Fancy stuff:SURFnet - We make innovation work8
- 10. Support for HTML5 VideoSURFnet - We make innovation work9
- 11. BrowsersSURFnet - We make innovation work10SURFmediavisitors (jan-feb 2011)
- 12. Video formats for HTML5Video/audio codec support depends on browser/platformLots of politics involvedPlatforms support own media format:Apple supports Quicktime in OSX/iOSMicrosoft supports WMV in WindowsSURFnet - We make innovation work11
- 13. Cross-platform Formats3 cross-platform formats:H.264OggWebMSURFnet - We make innovation work12
- 14. Cross-platform FormatsH.264:MP4 containerH.264 video (baseline/main/high)AAC audioModern codecs with high compression rate
- 15. Widely supported
- 17. Very good video-encoders available (x264)
- 18. Licensing fees requiredSURFnet - We make innovation work13
- 19. Cross-platform FormatsOgg:Ogg containerTheora (VP3) videoVorbis audioSlightly dated video codec
- 22. Not very widely supported
- 23. Open format, free to useSURFnet - We make innovation work14
- 24. New kid on the blockWebM:VP8 video Vorbis audioSimplified Matroska containerOpen and Free
- 25. Slightly less advanced than H.264
- 27. Problems:Ulterior motives?Possible patent issuesSURFnet - We make innovation work15
- 28. New kid on the block“A key factor in the web’s success is that its core technologies such as HTML, HTTP, TCP/IP, etc. are open and freely implementable. Though video is also now core to the web experience, there is unfortunately no open and free video format that is on par with the leading commercial choices. To that end, we are excited to introduce WebM, a broadly-backed community effort to develop a world-class media format for the open web.”SURFnet - We make innovation work16
- 29. Client supportSURFnet - We make innovation work17No single cross-platform formatNeed H.264 and (WebM or Ogg)Mobile world even more problematic.
- 30. Nothing settled yetHow quickly will IE9 and Firefox 4 be adopted?Lots of developments:H.264 will stay free for consumersAdobe Flash will support WebMGoogle supports WebM in Internet Explorer (!)Google drops support for MP4/H.264 from ChromeMicrosoft supports MP4/H.264 in Chrome (!)What’s next?SURFnet - We make innovation work18
- 31. Why no HTML5?Complexity shifted to video backendNeed to support different/multiple formatsSome features not available (yet?):DRMLive recordingsRTP streaming/multicastSURFnet - We make innovation work19
- 32. ConclusionSURFnet - We make innovation work20HTML5 Video is here to stayAbide your timeBut be prepared
- 33. Be prepared!Get rid of proprietary formatsAdd support for Ogg or WebMPossible right now: implement HTML5 video with Flash fallbackSURFnet - We make innovation work21
- 34. SURFnet - We make innovation work22http://www.mediamosa.org/content/html5-video-current-situationhttp://demo.mediamosa.org/content/html5-browser-supportBas Zoetekouwb.zoetekouw@surfnet.nlwww.surfnet.nlPresentation released under Creative Commonshttp://creativecommons.org/licenses/by/3.0/
Editor's Notes
- #3: New HTML standardLong overdue (HTML4 is from, XHTML1.1 is from)No longer xml-based: old-fashioned SGMLSupport for many “modern” featuresPushed by Google (?)First HTML5 working draft in 2008
- #4: New HTML standardLong overdue (HTML4 is from, XHTML1.1 is from)No longer xml-based: old-fashioned SGMLSupport for many “modern” featuresPushed by Google (?)First HTML5 working draft in 2008
- #7: Extreemgefragmenteerd:FlashSilverlightQuicktime(real)Open Source thingsOnly solution for any kind of cross-platform support: use FlashBut bad track record for supporting new systems (e.g., 64 bit OS, new linux sound system, etc)
- #8: Also audioHow does HTML5 support video?Old situationNew situationHow to be backwards-compatible
- #9: EasierCleanerOpen standardsNo vendor lock-inAccessibilityPlugins: security issues, install problems, etc
- #10: All modern browsers support HTML5 videoExcept Microsoft Internet Explorer 8Except Windows/Nokia Mobile
- #13: Video formats supported vary widelyMany proprietary formats3 main formats that are supported cross-platform: MP4,Ogg, WebM
- #14: Video formats supported vary widelyMany proprietary formats3 main formats that are supported cross-platform: MP4,Ogg, WebM
- #15: Based on VP3, from 2000 (cmp VP8)
- #16: WebM:New open formatbased on VP8 (comparable to, but slightly less advanced than h.264) Pushed by googleVideo: VP8 (cmp VP3==Theora)Audio: vorbisContainer: simplified matroska
- #17: WebM:New open formatPushed by googleVideo: VP8 (cmp VP3==Theora)Audio: vorbisContainer: simplified matroska
- #18: Still extremely fragmented:Basically:Need (WebM or Ogg) plus h.264 for Apple
- #19: Google heeftgroteinvloed door YoutubeKan basically nieuweformatenaangebruikersopdringen
- #20: Complexity is shifted towards video backendDRMRecordingsStreaming/multicast
- #21: HTML5 Video is the way forward (pushed by big players)But not right nowPossibly: HTML5 Video/flash hybrid (with javascript)Need (for now?) at least (ogg or webm) + h264 to support all platform?Or: let’s just ignore apple (?)
- #22: Move away from vendor-formatsNo quicktime, windows media, silverlightStart supporting Ogg or WebMKeep h264 as fall-back (for now) until either apple supports webm, or flash supports webm