2011 06-20 - drupal jam - html5 video

22
HTML5 and Video Bas Zoetekouw [email protected]

description

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

Transcript of 2011 06-20 - drupal jam - html5 video

Page 1: 2011 06-20 - drupal jam - html5 video

HTML5 and VideoBas [email protected]

Page 2: 2011 06-20 - drupal jam - html5 video

SURFnet

NetwerkinfrastructuurBasis voor alle samenwerking

Vertrouwde identiteitOm veilig en efficient toegang te verlenen

Grensverleggende samenwerkingsomgevingOm diensten en onderzoeksinstrumenten

naadloos met elkaar te koppelen2

Beheert nationale onderzoeksnetwerk

Page 3: 2011 06-20 - drupal jam - html5 video

SURFnet. We make innovation work1

MediaMosa Open Source

Software to build a Media Management and

Distribution Platform

Main Entry: 1me·dia-mo-saPronunciation: \ˈmē-dē-ə-mō-ˈzā\Function: open source software to build a media management and distribution platformRelease Date: 8 april 2009

In use by SURFnet and Kennisnet on their

VP-Core platform since July 2008

➡ Common base for MediaMosa is Drupal

Page 4: 2011 06-20 - drupal jam - html5 video

SURFnet. We make innovation work1

MediaMosaDirections

MediaMosa

MediaMosa

MediaMosa

WWWhttp://mediamosa.org

Online Demohttp://demo.mediamosa.org

Forumhttp://mediamosa.org/forum

Issue Trackerhttp://mediamosa.org/trac

Source Codehttps://github.com/mediamosa

Slidesharehttp://www.slideshare.net/MediaMosa

Twitterhttp://twitter.com/mediamosa

Page 5: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work5

HTML5 Video

Report published (jan 2011)

HTML5 Video: current statusby Herman van Dompseler and Bas Zoetekouw

Download athttp://www.mediamosa.org/content/html5-video-current-situation

http://www.surfnetkennisnetproject.nl/attachments/2312355/HTML5.pdf

Page 6: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work7

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/

Page 7: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work11

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

Page 8: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work12

Why HTML5-based video?

- Easy & clean- Open standard- Cross-platform- No more plugins!

- Fancy stuff:

Page 9: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work13

Support for HTML5 Video

Page 10: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work14

Browsers

SURFmedia visitors (jan-feb 2011)

Page 11: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work15

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

Page 12: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work16

Cross-platform Formats

3 cross-platform formats:

- H.264- Ogg- WebM

Page 13: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work17

Cross-platform Formats

H.264:- MP4 container- H.264 video (baseline/main/high)- AAC audio

o Modern codecs with high compression rateo Widely supportedo Hardware implementation availableo Very good video-encoders available (x264)o Licensing fees required

Page 14: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work18

Cross-platform Formats

Ogg:- Ogg container- Theora (VP3) video- Vorbis audio

o Slightly dated video codeco Decent quality videoo No hardware implementationso Not very widely supportedo Open format, free to use

Page 15: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work19

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.”

Page 16: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work20

New kid on the block

WebM:- VP8 video - Vorbis audio- Simplified Matroska container

o Open and Freeo Slightly less advanced than H.264o Support growing rapidly

o Problems:- Ulterior motives?- Possible patent issues

Page 17: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work21

Client support

No single cross-platform format- Need H.264 and (WebM or Ogg)

Mobile world even more problematic.

Page 18: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work22

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?

Page 19: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work23

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

Page 20: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work24

Conclusion

HTML5 Video is here to stay

- Abide your time

- But be prepared

Page 21: 2011 06-20 - drupal jam - html5 video

SURFnet - We make innovation work25

Be prepared!

- Get rid of proprietary formats- Add support for Ogg or WebM

- Possible right now: implement HTML5 video with Flash fallback