• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2011 06-20 - drupal jam - html5 video
 

2011 06-20 - drupal jam - html5 video

on

  • 1,166 views

HTML5 Video

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

Statistics

Views

Total Views
1,166
Views on SlideShare
1,166
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

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
  • 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 2011 06-20 - drupal jam - html5 video Presentation Transcript

  • HTML5 and Video
    Bas Zoetekouw
    Bas.zoetekouw@surfnet.nl
  • SURFnet
    Beheertnationaleonderzoeksnetwerk
    Netwerkinfrastructuur
    Basis voorallesamenwerking
    Vertrouwdeidentiteit
    Om veilig en efficient toegangteverlenen
    Grensverleggendesamenwerkingsomgeving
    Om diensten en onderzoeksinstrumentennaadloos met elkaartekoppelen
    1
  • 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
  • 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
  • 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
  • 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
  • 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/
  • HTML5: possibilities
    Limitless possibilities!
    Webapps
    Games
    Multimedia
    SURFnet - We make innovation work
    7
  • HTML5 games
    SURFnet - We make innovation work
    8
  • 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
  • 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
  • Why HTML5-based video?
    Easy & clean
    Open standard
    Cross-platform
    No more plugins!
    Fancy stuff:
    SURFnet - We make innovation work
    11
  • Support for HTML5 Video
    SURFnet - We make innovation work
    12
  • Browsers
    SURFnet - We make innovation work
    13
    SURFmediavisitors (jan-feb 2011)
  • 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
  • Cross-platform Formats
    3 cross-platform formats:
    H.264
    Ogg
    WebM
    SURFnet - We make innovation work
    15
  • Cross-platform Formats
    H.264:
    MP4 container
    H.264 video (baseline/main/high)
    AAC audio
    • Modern codecs with high compression rate
    • Widely supported
    • Hardware implementation available
    • Very good video-encoders available (x264)
    • Licensing fees required
    SURFnet - We make innovation work
    16
  • Cross-platform Formats
    Ogg:
    Ogg container
    Theora (VP3) video
    Vorbis audio
    • Slightly dated video codec
    • Decent quality video
    • No hardware implementations
    • Not very widely supported
    • Open format, free to use
    SURFnet - We make innovation work
    17
  • 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
  • New kid on the block
    WebM:
    VP8 video
    Vorbis audio
    Simplified Matroska container
    • Open and Free
    • Slightly less advanced than H.264
    • Support growing rapidly
    • Problems:
    Ulterior motives?
    Possible patent issues
    SURFnet - We make innovation work
    19
  • 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.
  • 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
  • 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
  • Conclusion
    SURFnet - We make innovation work
    23
    HTML5 Video is here to stay
    Abide your time
    But be prepared
  • 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
  • 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