HTML5 and Video Bas Zoetekouw Bas.zoetekouw@surfnet.nl HTML5 Video - - PowerPoint PPT Presentation

▶
html5 and video
SMART_READER_LITE
LIVE PREVIEW

HTML5 and Video Bas Zoetekouw Bas.zoetekouw@surfnet.nl HTML5 Video - - PowerPoint PPT Presentation

Feb 17, 2024 354 likes •590 views

HTML5 and Video Bas Zoetekouw Bas.zoetekouw@surfnet.nl 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

slide-1
SLIDE 1

HTML5 and Video

Bas Zoetekouw

Bas.zoetekouw@surfnet.nl

slide-2
SLIDE 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

slide-3
SLIDE 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
slide-4
SLIDE 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/
slide-5
SLIDE 5

HTML5: possibilities

Limitless possibilities!

  • Webapps
  • Games
  • Multimedia

SURFnet - We make innovation work 4

slide-6
SLIDE 6

HTML5 games

SURFnet - We make innovation work 5

slide-7
SLIDE 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

slide-8
SLIDE 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

slide-9
SLIDE 9

Why HTML5-based video?

  • Easy & clean
  • Open standard
  • Cross-platform
  • No more plugins!
  • Fancy stuff:

SURFnet - We make innovation work 8

slide-10
SLIDE 10

Support for HTML5 Video

SURFnet - We make innovation work 9

slide-11
SLIDE 11

Browsers

SURFnet - We make innovation work 10

SURFmedia visitors (jan-feb 2011)

IE6 1% Internet Explorer 7 15% Internet Explorer 8 49% IE9 1% Firefox 16% Chrome 11% Safari 6% Other 1% Non-IE browsers 34%

slide-12
SLIDE 12

Video formats for HTML5

  • Video/audio codec support depends
  • n 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

slide-13
SLIDE 13

Cross-platform Formats

3 cross-platform formats:

  • H.264
  • Ogg
  • WebM

SURFnet - We make innovation work 12

slide-14
SLIDE 14

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 13

slide-15
SLIDE 15

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 14

slide-16
SLIDE 16

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 15

slide-17
SLIDE 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 16

slide-18
SLIDE 18

Internet Explorer Firefox Chrome Safari Opera 8 9 3.6 4.0 6+ 3+ 10.6+ Ogg/Theora/Vorbis – – ! ! ! – ! MP4/H.264/AAC/ – ! – – ! ! – WebM/VP8/Vorbis – ! – ! ! – !

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.

slide-19
SLIDE 19

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

slide-20
SLIDE 20

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

slide-21
SLIDE 21

Conclusion

SURFnet - We make innovation work 20

HTML5 Video is here to stay

  • Abide your time
  • But be prepared
slide-22
SLIDE 22

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

slide-23
SLIDE 23

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/