WebM Open Video Playback in HTML5 - Huihoo - 开放文档docs.huihoo.com/google/io/2010/chrome-webm-open-video-playback... · WebM Open Video Playback in HTML5 Kevin Carle & James

WebM Open Video Playback in HTML5

Kevin Carle & James Bankoski, Google Bob Mason, Brightcove May 19, 2010

Wave

View live notes and ask questions about this session on Google Wave:

http://bit.ly/cvBgIn

Kevin Carle, Software Engineer, YouTube

Agenda

•  What is HTML5 <video>? •  Benefits of <video> •  Current state of <video> at YouTube •  What is WebM video? •  WebM <video> in YouTube •  WebM <video> in Brightcove •  <video> development experiences & findings •  Q&A

What is HTML5 <video>?

•  HTML5 introduces media tags (<audio> , <video>)

•  Media player is part of the browser - No plug-in

•  Otherwise like any other tag

<video controls>

<source src=“video.webm” type=“video/webm”/>

</video> •  Codecs & Containers

Benefits of <video> •  Open source technology

•  Open source browser/player

•  Open source codec/container

•  Lower Latency

•  Avoid plug-in instantiation

•  Better, Smoother Performance

•  Accessibility

•  User agents can have special video handling

•  Semantics

Current state of <video> at YouTube

•  HTML5 opt-in is at http://www.youtube.com/html5

•  WebM videos available on search with &webm=1 parameter

•  Browsers supported:

•  Chrome (h.264 & WebM)

•  Safari (h.264)

•  Opera – soon (WebM)

•  Firefox – soon (WebM)

•  IE9 – (when <video> support exists) •  No support for advanced overlays (ads, annotations)

o  Caption support just added

Video at YouTube

•  YouTube supports h.264 & WebM

•  Both formats will be supported for new uploads

•  H.264 •  All videos available •  With MP4 container: 360p, 720p, 1080p •  With FLV container: all formats

•  WebM •  New HD (720p and above) uploads will be in WebM •  Later enabled for all new uploads •  Transcoding existing videos over time •  Currently available in 360p and 720p

What It Isn't...Yet: Adoption Hurdles

•  Fullscreen

•  Embedding (<iframe>, <object>, fallback issues) •  <iframe> best option, but not always allowed

•  Live streaming

•  Stream management

•  Content protection

•  Implementations and spec still in motion

•  No agreed on standard / ecosystem for ads

Jim Bankoski, Engineering Manager, Google

On2: team and technology

•  Pioneers in video codec technology •  2B+ installs •  Optimized for the web

1992 - 1999 2000 - 2005 2006 - 2009 2010

Focus on video game industry

Codec development VP3 evolves into Theora. VP6 adoption by Flash

Adoption by Skype, Java, AIM and more

Acquisition by Google

What is WebM Video?

•  New video format optimized for the web o  (announced this morning in Sundar Pichai’s keynote)

•  WebM is a Media Format with o  VP8 video codec o  Vorbis audio codec o  WebM (a subset of Matroska)

What's Great About WebM

•  Video Quality

•  Playback Performance

•  Live / 2 Way Encoder Performance

•  Openness

•  Hardware Device support

•  Content Creation Tool Support

DucksTakeOff(1920x1080@50fps)

24

24.5

25

25.5

26

26.5

27

2000 2500 3000 3500 4000 4500 5000

VP8_4_21_10

X264V1376S

DucksTakeOff(1920x1080@50fps)

24

24.5

25

25.5

26

26.5

27

2000 2500 3000 3500 4000 4500 5000

VP8_4_21_10

X264V1376S

Bitrate in Kilobits Per Second

PSN

R in

dec

ibel

2800 kbps 3400 kbps

Fixed Quality

Night (1280x720@30fps)

32

33

34

35

36

37

38

600 1100 1600 2100 2600

VP8_4_21_10

X264V1376S

Bear (640x360@30fps)

38.5

39

39.5

40

40.5

41

41.5

42

42.5

43

43.5

500 700 900 1100 1300 1500 1700

VP8_4_21_10

X264V1376S

Cheer (320x240@30fps)

21

21.5

22

22.5

23

23.5

24

24.5

25

25.5

26

150 200 250 300 350 400 450

VP8_4_21_10

X264V1376S

Football (320x240@30fps)

26

27

28

29

30

31

32

33

100 150 200 250 300 350 400 450

VP8_4_21_10

X264V1376S

21

x264 High Profile Vp8 - P0 x264 BaseLine Profile Vp8 - P1 Vp8 - P2 Vp8 - P3

Sheriff 2.19 1.80 1.08 1.25 1.08 0.90 Night 1.63 1.22 0.73 0.88 0.73 0.65 Tulip 3.48 3.04 1.73 2.15 1.77 1.48

0.00

0.50

1.00

1.50

2.00

2.50

3.00

3.50

4.00

3.2Ghz quad core hyper-threaded ( running on single Core)

Sheriff

Night

Tulip Seco

nds t

o de

code

clip

22



0.00

2.00

4.00

6.00

8.00

10.00

12.00

14.00

Intel(R) Core(TM)2 Quad CPU Q6600 @ 2.40GHz

Sheriff

Night

Tulip Seco

nds t

o de

code

clip

23



0.00

5.00

10.00

15.00

20.00

25.00

30.00

Intel(R) Atom(TM) CPU 230 @ 1.60GHz

Sheriff

Night

Tulip Seco

nds t

o de

code

clip

24

Vp8 - P0 Vp8 - P1 Vp8 - P2 Vp8 - P3

Sheriff 12.26 10.31 8.63 8.63 Night 9.20 7.95 6.64 6.53 Tulip 20.62 17.31 14.60 14.57

0.00

5.00

10.00

15.00

20.00

25.00

Snapdragon @ 1Ghz

Sheriff

Night

Tulip Seco

nds t

o de

code

clip

0

10

20

30

40

50

60

70

15 14 13 12 11 10 9 8 7 6 5 4 3 2 1

Mill

isec

onds

Per

Fra

me

Algorithmic Speed

Real Time Speed– X86 640x480 Software Only Compress

Feb-10 Dec-09

0

20

40

60

80

100

120

140

160

4 8 12

Mill

isec

onds

Per

Fra

me

Algorithmic Speed

640x480 Neon Encoder

February 640x480 September 640x480

Openness

•  Community effort – Here’s how can contribute!

TODO: Short Term - Improve on All Fronts

•  Faster Decoding •  Better multi core decoding •  Use of SSE2 in decoder •  GPU Decoding

•  Improve the Overall Quality •  Lagged Compress •  “Best quality” encoding speed •  Subjective quality enhancements •  Better use of some of the internal features

What Browsers Support WebM?

•  Tonight’s Chromium nightly

•  Chrome dev channel build available next week

•  Tonight’s Mozilla nightly

•  Opera Beta

•  Hopefully others, everyone is invited!

•  All of this Info is found on webmproject.org

Industry Support

Software

Hardware

Platforms and Publishers

Demo: WebM in YouTube

Brightcove and HTML5 with WebM

David Mendels & Bob Mason

May 19, 2010

Over the last 4 years, online video has evolved way beyond simple playback

The Current Market Expects Fully-Functional Video Experiences

The Brightcove Experience for HTML5 with WebM

Delivers a high quality, interactive and fully monetizable video experience based on open standards

Automatic Device Detection

Native HTML5 Player Templates

High quality transcoding to WebM* and h.264

Graceful Fallback

* Expected before year end 2010

Demo

Kevin Carle, Software Engineer, YouTube

YouTube HTML5 Experiences & Findings

•  Debugging: &Debug=true , &html5=True •  Find WebM videos: &webm=1 on any search •  Didn’t use HTML5 semantic tags for now

•  Not quite supported across browsers •  Lacking CSS support in some cases

•  CSS choices •  Fallback content and source selection •  Device support & inline HTML5 •  Variable speed playback •  Seeking: Pause, Seek, Play •  TimeUpdate / Progress / Buffering issues

Q&A

View live notes and ask questions about this session on Google Wave:

http://bit.ly/cvBgln

Encoder Test Settings •  VP8 ivfinc encoder included with VP8 Codec SDK ivfenc ..\%1.yuv %1_%2_vp8.ivf --i420 -w %3 -h %4 -p 2 --best --cpu-used=0 --target-

bitrate=%2 --auto-alt-ref=1 --timebase=1/%5 -v --minsection-pct=0 --maxsection-pct=1000 --lag-in-frames=16 --kf-min-dist=0 --kf-max-dist=99999 --static-thresh=0 --min-q=0 --max-q=63

•  x264v1376S x264.exe --psnr --ssim --ref 10 --mixed-refs --no-fast-pskip --bframes 16 --b-pyramid

normal --direct auto --subme 10 --trellis 2 --partitions p8x8,b8x8,i4x4,i8x8 --8x8dct --me umh --threads auto --thread-input --no-dct-decimate --pass 1 --bitrate %4 --fps %5 -o %1_264best_%4.mkv ..\%1.yuv %2x%3 2> %1_264best_%4_p1.log

x264.exe --psnr --ssim --ref 10 --mixed-refs --no-fast-pskip --bframes 16 --b-pyramid normal --direct auto --subme 10 --trellis 2 --partitions p8x8,b8x8,i4x4,i8x8 --8x8dct --me umh --threads auto --thread-input --no-dct-decimate --pass 2 --bitrate %4 --fps %5 -o %1_264best_%4.mkv ..\%1.yuv %2x%3 2> %1_264best_%4_p2.log

Documents

WebM Open Video Playback in HTML5 - Huihoo - 开放文档docs.huihoo.com/google/io/2010/chrome-webm-open-video-playback... · WebM Open Video Playback in HTML5 Kevin Carle & James