HTML5 and Video<br />Bas Zoetekouw<br />Bas.zoetekouw@surfnet.nl<br />
SURFnet<br />Beheertnationaleonderzoeksnetwerk<br />Netwerkinfrastructuur<br />Basis voorallesamenwerking<br />Vertrouwdei...
MediaMosaOpen SourceSoftware to build a Media Management andDistribution Platform<br />In use by SURFnet and Kennisnet on ...
MediaMosaDirections<br />WWW<br />http://mediamosa.org<br />Online Demo<br />http://demo.mediamosa.org<br />Forum<br />htt...
HTML5 Video<br />Report published (jan2011)<br />HTML5 Video: current status<br />by Herman van Dompseler and Bas Zoetekou...
SURFnet - We make innovation work<br />5<br />What is HTML5?<br />HTML 2.0: 1995<br />HTML 3.2: 1997<br />HTML 4.0: 1998<b...
SURFnet - We make innovation work<br />6<br />What is HTML5?<br />HTML5 ≈ HTML + CSS + JS<br />Integrates multimedia:<br /...
HTML5: possibilities<br />Limitless possibilities!<br />Webapps<br />Games<br />Multimedia<br />SURFnet - We make innovati...
HTML5 games<br />SURFnet - We make innovation work<br />8<br />
Video: before HTML5<br /><object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/qiD93UxvHRw...
HTML5 and Video<br />Support for playing video directly from the browser<br /><video id="movie" width="320" height="240" p...
Why HTML5-based video?<br />Easy & clean<br />Open standard<br />Cross-platform<br />No more plugins!<br />Fancy stuff:<br...
Support for HTML5 Video<br />SURFnet - We make innovation work<br />12<br />
Browsers<br />SURFnet - We make innovation work<br />13<br />SURFmediavisitors (jan-feb 2011)<br />
Video formats for HTML5<br />Video/audio codec support depends on browser/platform<br />Lots of politics involved<br />Pla...
Cross-platform Formats<br />3 cross-platform formats:<br />H.264<br />Ogg<br />WebM<br />SURFnet - We make innovation work...
Cross-platform Formats<br />H.264:<br />MP4 container<br />H.264 video (baseline/main/high)<br />AAC audio<br /><ul><li>Mo...
Widely supported
Hardware implementation available
Very good video-encoders available (x264)
Licensing fees required</li></ul>SURFnet - We make innovation work<br />16<br />
Cross-platform Formats<br />Ogg:<br />Ogg container<br />Theora (VP3) video<br />Vorbis audio<br /><ul><li>Slightly dated ...
Upcoming SlideShare
Loading in...5
×

2011 06-20 - drupal jam - html5 video

1,147

Published on

HTML5 Video
Event: Drupal Jam at Beeld en Geluid, Hilversum on June 20, 2011
Presentation by Bas Zoetekouw, SURFnet

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,147
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • 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
  • 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)
  • Also audioHow does HTML5 support video?Old situationNew situationHow to be backwards-compatible
  • EasierCleanerOpen standardsNo vendor lock-inAccessibilityPlugins: security issues, install problems, etc
  • All modern browsers support HTML5 videoExcept Microsoft Internet Explorer 8Except Windows/Nokia Mobile
  • Video formats supported vary widelyMany proprietary formats3 main formats that are supported cross-platform: MP4,Ogg, WebM
  • Video formats supported vary widelyMany proprietary formats3 main formats that are supported cross-platform: MP4,Ogg, WebM
  • Based on VP3, from 2000 (cmp VP8)
  • WebM:New open formatPushed by googleVideo: VP8 (cmp VP3==Theora)Audio: vorbisContainer: simplified matroska
  • 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
  • Still extremely fragmented:Basically:Need (WebM or Ogg) plus h.264 for Apple
  • Google heeftgroteinvloed door YoutubeKan basically nieuweformatenaangebruikersopdringen
  • Complexity is shifted towards video backendDRMRecordingsStreaming/multicast
  • 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 (?)
  • 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
  • 2011 06-20 - drupal jam - html5 video

    1. 1. HTML5 and Video<br />Bas Zoetekouw<br />Bas.zoetekouw@surfnet.nl<br />
    2. 2. SURFnet<br />Beheertnationaleonderzoeksnetwerk<br />Netwerkinfrastructuur<br />Basis voorallesamenwerking<br />Vertrouwdeidentiteit<br />Om veilig en efficient toegangteverlenen<br />Grensverleggendesamenwerkingsomgeving<br />Om diensten en onderzoeksinstrumentennaadloos met elkaartekoppelen<br />1<br />
    3. 3. MediaMosaOpen SourceSoftware to build a Media Management andDistribution Platform<br />In use by SURFnet and Kennisnet on their VP-Core platform since July 2008<br /><ul><li>Common base for MediaMosa is Drupal</li></ul>Main Entry: 1me·dia-mo-sa<br />Pronunciation: ˈmē-dē-ə-mō-ˈzā<br />Function: open source software to build a media management and distribution platform<br />Release Date: 8 april 2009<br />SURFnet. We make innovation work<br />1<br />
    4. 4. MediaMosaDirections<br />WWW<br />http://mediamosa.org<br />Online Demo<br />http://demo.mediamosa.org<br />Forum<br />http://mediamosa.org/forum<br />Issue Tracker<br />http://mediamosa.org/trac<br />Source Code<br />https://github.com/mediamosa<br />Slideshare<br />http://www.slideshare.net/MediaMosa<br />Twitter<br />http://twitter.com/mediamosa<br />MediaMosa<br />MediaMosa<br />MediaMosa<br />SURFnet. We make innovation work<br />1<br />
    5. 5. HTML5 Video<br />Report published (jan2011)<br />HTML5 Video: current status<br />by Herman van Dompseler and Bas Zoetekouw<br />Download at<br />http://www.mediamosa.org/content/html5-video-current-situation<br />http://www.surfnetkennisnetproject.nl/attachments/2312355/HTML5.pdf<br />SURFnet - We make innovation work<br />4<br />
    6. 6. SURFnet - We make innovation work<br />5<br />What is HTML5?<br />HTML 2.0: 1995<br />HTML 3.2: 1997<br />HTML 4.0: 1998<br />XHTML 1.0: 2000<br />XHTML 1.1: 2001<br />…<br />…<br />HTML5: 201x<br />
    7. 7. SURFnet - We make innovation work<br />6<br />What is HTML5?<br />HTML5 ≈ HTML + CSS + JS<br />Integrates multimedia:<br />2D & 3D drawing (Canvas, WebGL) <br />Audio and video playback<br />Native SVG support<br />New semantic elements: <br /><nav>, <footer>, <figcaption>, <section><br />Lots of other useful features:<br />Geolocation<br />Persistent offline storage (blob, SQL)<br />Multithreaded JS (“web workers”)<br />Web fonts<br />Extensive overview:http://slides.html5rocks.com/<br />
    8. 8. HTML5: possibilities<br />Limitless possibilities!<br />Webapps<br />Games<br />Multimedia<br />SURFnet - We make innovation work<br />7<br />
    9. 9. HTML5 games<br />SURFnet - We make innovation work<br />8<br />
    10. 10. Video: before HTML5<br /><object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/qiD93UxvHRw?fs=1&amp;hl=nl_NL"><br /> </param> <param name="allowFullScreen" value="true"></param><br /> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/qiD93UxvHRw?fs=1&amp;hl=nl_NL”<br /> type="application/x–shockwave–Flash” allowscriptaccess="always”<br />allowfullscreen="true" width="640" height="385"><br /> </embed></object><br />SURFnet - We make innovation work<br />9<br />
    11. 11. HTML5 and Video<br />Support for playing video directly from the browser<br /><video id="movie" width="320" height="240" preload controls> <source src="MY_MOVIE.mp4" /> <source src="MY_MOVIE.webm" type='video/webm/></video><br />No plugins required<br />Rendering of video is responsibility of the browser<br />Video fully accessible from Javascript/DOM<br />Styling using CSS<br />SURFnet - We make innovation work<br />10<br />
    12. 12. Why HTML5-based video?<br />Easy & clean<br />Open standard<br />Cross-platform<br />No more plugins!<br />Fancy stuff:<br />SURFnet - We make innovation work<br />11<br />
    13. 13. Support for HTML5 Video<br />SURFnet - We make innovation work<br />12<br />
    14. 14. Browsers<br />SURFnet - We make innovation work<br />13<br />SURFmediavisitors (jan-feb 2011)<br />
    15. 15. Video formats for HTML5<br />Video/audio codec support depends on browser/platform<br />Lots of politics involved<br />Platforms support own media format:<br />Apple supports Quicktime in OSX/iOS<br />Microsoft supports WMV in Windows<br />SURFnet - We make innovation work<br />14<br />
    16. 16. Cross-platform Formats<br />3 cross-platform formats:<br />H.264<br />Ogg<br />WebM<br />SURFnet - We make innovation work<br />15<br />
    17. 17. Cross-platform Formats<br />H.264:<br />MP4 container<br />H.264 video (baseline/main/high)<br />AAC audio<br /><ul><li>Modern codecs with high compression rate
    18. 18. Widely supported
    19. 19. Hardware implementation available
    20. 20. Very good video-encoders available (x264)
    21. 21. Licensing fees required</li></ul>SURFnet - We make innovation work<br />16<br />
    22. 22. Cross-platform Formats<br />Ogg:<br />Ogg container<br />Theora (VP3) video<br />Vorbis audio<br /><ul><li>Slightly dated video codec
    23. 23. Decent quality video
    24. 24. No hardware implementations
    25. 25. Not very widely supported
    26. 26. Open format, free to use</li></ul>SURFnet - We make innovation work<br />17<br />
    27. 27. New kid on the block<br />“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.”<br />SURFnet - We make innovation work<br />18<br />
    28. 28. New kid on the block<br />WebM:<br />VP8 video <br />Vorbis audio<br />Simplified Matroska container<br /><ul><li>Open and Free
    29. 29. Slightly less advanced than H.264
    30. 30. Support growing rapidly
    31. 31. Problems:</li></ul>Ulterior motives?<br />Possible patent issues<br />SURFnet - We make innovation work<br />19<br />
    32. 32. Client support<br />SURFnet - We make innovation work<br />20<br />No single cross-platform format<br />Need H.264 and (WebM or Ogg)<br />Mobile world even more problematic.<br />
    33. 33. Nothing settled yet<br />How quickly will IE9 and Firefox 4 be adopted?<br />Lots of developments:<br />H.264 will stay free for consumers<br />Adobe Flash will support WebM<br />Google supports WebM in Internet Explorer (!)<br />Google drops support for MP4/H.264 from Chrome<br />Microsoft supports MP4/H.264 in Chrome (!)<br />Google transcodes new Youtube movies to WebM<br />What’s next?<br />SURFnet - We make innovation work<br />21<br />
    34. 34. Why no HTML5?<br />Complexity shifted to video backend<br />Need to support different/multiple formats<br />Some features not available (yet?):<br />DRM<br />Live recordings<br />RTP streaming/multicast<br />SURFnet - We make innovation work<br />22<br />
    35. 35. Conclusion<br />SURFnet - We make innovation work<br />23<br />HTML5 Video is here to stay<br />Abide your time<br />But be prepared<br />
    36. 36. Be prepared!<br />Get rid of proprietary formats<br />Add support for Ogg or WebM<br />Possible right now: <br /> implement HTML5 video with Flash fallback<br />SURFnet - We make innovation work<br />24<br />
    37. 37. SURFnet - We make innovation work<br />25<br />http://www.mediamosa.org/content/html5-video-current-situation<br />http://www.surfnetkennisnetproject.nl/attachments/2312355/HTML5_rapport_feb2011.pdf<br />http://demo.mediamosa.org/content/html5-browser-support<br />Bas Zoetekouw<br />b.zoetekouw@surfnet.nl<br />www.surfnet.nl<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×