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.

1. HTML5 and Video Bas Zoetekouw Bas.zoetekouw@surfnet.nl

2. HTML5 Video Report published (jan 2011) HTML5 Video: current status by Herman van Dompseler and Bas Zoetekouw Download at http://www.mediamosa.org/content/html5-video-current-situation SURFnet - We make innovation work 1

3. SURFnet - We make innovation work 2 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

4. SURFnet - We make innovation work 3 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/

5. HTML5: possibilities Limitless possibilities! Webapps Games Multimedia SURFnet - We make innovation work 4

6. HTML5 games SURFnet - We make innovation work 5

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

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

9. Why HTML5-based video? Easy & clean Open standard Cross-platform No more plugins! Fancy stuff: SURFnet - We make innovation work 8

10. Support for HTML5 Video SURFnet - We make innovation work 9

11. Browsers SURFnet - We make innovation work 10 SURFmediavisitors (jan-feb 2011)

12. 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 11

13. Cross-platform Formats 3 cross-platform formats: H.264 Ogg WebM SURFnet - We make innovation work 12

15. Widely supported

16. Hardware implementation available

17. Very good video-encoders available (x264)

18. Licensing fees requiredSURFnet - We make innovation work 13

20. Decent quality video

21. No hardware implementations

22. Not very widely supported

23. Open format, free to useSURFnet - We make innovation work 14

25. Slightly less advanced than H.264

26. Support growing rapidly

27. Problems:Ulterior motives? Possible patent issues SURFnet - We make innovation work 15

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 work 16

29. Client support SURFnet - We make innovation work 17 No single cross-platform format Need H.264 and (WebM or Ogg) Mobile world even more problematic.

30. 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 (!) What’s next? SURFnet - We make innovation work 18

31. 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 19

32. Conclusion SURFnet - We make innovation work 20 HTML5 Video is here to stay Abide your time But be prepared

33. 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 21

34. SURFnet - We make innovation work 22 http://www.mediamosa.org/content/html5-video-current-situation http://demo.mediamosa.org/content/html5-browser-support Bas Zoetekouw b.zoetekouw@surfnet.nl www.surfnet.nl Presentation released under Creative Commons http://creativecommons.org/licenses/by/3.0/