Your SlideShare is downloading. ×
2011 06-20 - drupal jam - html5 video
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

2011 06-20 - drupal jam - html5 video

1,129

Published on

HTML5 Video …

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,129
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. HTML5 and Video
      Bas Zoetekouw
      Bas.zoetekouw@surfnet.nl
    • 2. SURFnet
      Beheertnationaleonderzoeksnetwerk
      Netwerkinfrastructuur
      Basis voorallesamenwerking
      Vertrouwdeidentiteit
      Om veilig en efficient toegangteverlenen
      Grensverleggendesamenwerkingsomgeving
      Om diensten en onderzoeksinstrumentennaadloos met elkaartekoppelen
      1
    • 3. MediaMosaOpen SourceSoftware to build a Media Management andDistribution Platform
      In use by SURFnet and Kennisnet on their VP-Core platform since July 2008
      • Common base for MediaMosa is Drupal
      Main Entry: 1me·dia-mo-sa
      Pronunciation: ˈmē-dē-ə-mō-ˈzā
      Function: open source software to build a media management and distribution platform
      Release Date: 8 april 2009
      SURFnet. We make innovation work
      1
    • 4. MediaMosaDirections
      WWW
      http://mediamosa.org
      Online Demo
      http://demo.mediamosa.org
      Forum
      http://mediamosa.org/forum
      Issue Tracker
      http://mediamosa.org/trac
      Source Code
      https://github.com/mediamosa
      Slideshare
      http://www.slideshare.net/MediaMosa
      Twitter
      http://twitter.com/mediamosa
      MediaMosa
      MediaMosa
      MediaMosa
      SURFnet. We make innovation work
      1
    • 5. HTML5 Video
      Report published (jan2011)
      HTML5 Video: current status
      by Herman van Dompseler and Bas Zoetekouw
      Download at
      http://www.mediamosa.org/content/html5-video-current-situation
      http://www.surfnetkennisnetproject.nl/attachments/2312355/HTML5.pdf
      SURFnet - We make innovation work
      4
    • 6. SURFnet - We make innovation work
      5
      What is HTML5?
      HTML 2.0: 1995
      HTML 3.2: 1997
      HTML 4.0: 1998
      XHTML 1.0: 2000
      XHTML 1.1: 2001


      HTML5: 201x
    • 7. SURFnet - We make innovation work
      6
      What is HTML5?
      HTML5 ≈ HTML + CSS + JS
      Integrates multimedia:
      2D & 3D drawing (Canvas, WebGL)
      Audio and video playback
      Native SVG support
      New semantic elements:
      <nav>, <footer>, <figcaption>, <section>
      Lots of other useful features:
      Geolocation
      Persistent offline storage (blob, SQL)
      Multithreaded JS (“web workers”)
      Web fonts
      Extensive overview:http://slides.html5rocks.com/
    • 8. HTML5: possibilities
      Limitless possibilities!
      Webapps
      Games
      Multimedia
      SURFnet - We make innovation work
      7
    • 9. HTML5 games
      SURFnet - We make innovation work
      8
    • 10. Video: before HTML5
      <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/qiD93UxvHRw?fs=1&amp;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&amp;hl=nl_NL”
      type="application/x–shockwave–Flash” allowscriptaccess="always”
      allowfullscreen="true" width="640" height="385">
      </embed></object>
      SURFnet - We make innovation work
      9
    • 11. HTML5 and Video
      Support 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 required
      Rendering of video is responsibility of the browser
      Video fully accessible from Javascript/DOM
      Styling using CSS
      SURFnet - We make innovation work
      10
    • 12. Why HTML5-based video?
      Easy & clean
      Open standard
      Cross-platform
      No more plugins!
      Fancy stuff:
      SURFnet - We make innovation work
      11
    • 13. Support for HTML5 Video
      SURFnet - We make innovation work
      12
    • 14. Browsers
      SURFnet - We make innovation work
      13
      SURFmediavisitors (jan-feb 2011)
    • 15. Video formats for HTML5
      Video/audio codec support depends on browser/platform
      Lots of politics involved
      Platforms support own media format:
      Apple supports Quicktime in OSX/iOS
      Microsoft supports WMV in Windows
      SURFnet - We make innovation work
      14
    • 16. Cross-platform Formats
      3 cross-platform formats:
      H.264
      Ogg
      WebM
      SURFnet - We make innovation work
      15
    • 17. Cross-platform Formats
      H.264:
      MP4 container
      H.264 video (baseline/main/high)
      AAC audio
      • Modern codecs with high compression rate
      • 18. Widely supported
      • 19. Hardware implementation available
      • 20. Very good video-encoders available (x264)
      • 21. Licensing fees required
      SURFnet - We make innovation work
      16
    • 22. Cross-platform Formats
      Ogg:
      Ogg container
      Theora (VP3) video
      Vorbis audio
      • Slightly dated video codec
      • 23. Decent quality video
      • 24. No hardware implementations
      • 25. Not very widely supported
      • 26. Open format, free to use
      SURFnet - We make innovation work
      17
    • 27. 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 work
      18
    • 28. New kid on the block
      WebM:
      VP8 video
      Vorbis audio
      Simplified Matroska container
      • Open and Free
      • 29. Slightly less advanced than H.264
      • 30. Support growing rapidly
      • 31. Problems:
      Ulterior motives?
      Possible patent issues
      SURFnet - We make innovation work
      19
    • 32. Client support
      SURFnet - We make innovation work
      20
      No single cross-platform format
      Need H.264 and (WebM or Ogg)
      Mobile world even more problematic.
    • 33. Nothing settled yet
      How quickly will IE9 and Firefox 4 be adopted?
      Lots of developments:
      H.264 will stay free for consumers
      Adobe Flash will support WebM
      Google supports WebM in Internet Explorer (!)
      Google drops support for MP4/H.264 from Chrome
      Microsoft supports MP4/H.264 in Chrome (!)
      Google transcodes new Youtube movies to WebM
      What’s next?
      SURFnet - We make innovation work
      21
    • 34. Why no HTML5?
      Complexity shifted to video backend
      Need to support different/multiple formats
      Some features not available (yet?):
      DRM
      Live recordings
      RTP streaming/multicast
      SURFnet - We make innovation work
      22
    • 35. Conclusion
      SURFnet - We make innovation work
      23
      HTML5 Video is here to stay
      Abide your time
      But be prepared
    • 36. Be prepared!
      Get rid of proprietary formats
      Add support for Ogg or WebM
      Possible right now:
      implement HTML5 video with Flash fallback
      SURFnet - We make innovation work
      24
    • 37. SURFnet - We make innovation work
      25
      http://www.mediamosa.org/content/html5-video-current-situation
      http://www.surfnetkennisnetproject.nl/attachments/2312355/HTML5_rapport_feb2011.pdf
      http://demo.mediamosa.org/content/html5-browser-support
      Bas Zoetekouw
      b.zoetekouw@surfnet.nl
      www.surfnet.nl

    ×