mm-4113, vp9 – next generation video for the web, by james bankoski

VP9 - Next Generation Video For the Web

Developer Summit


Agenda

● Introduction● Why use HTML5 and VP9 for video? ● How you can make video files.● How to put video on a web page.● Some more advanced things you can do. ● Conclusion.


Introduction

● About me● WebM Project Org (webmproject.org)● Chrome Media


Benefits of using the Web for Your Video Application

● Free deployment● Works everywhere● Simple to develop● Easy usage tracking● Functionality


Demo - The Same Video App Running 2 places

Run

http://localhost/elementary/index4.html

http://localhost/elementary/index4.html


Why use VP9

● Saves you bits and bits = money

○ Incorrect estimates from: Forbes○ These estimates say :

■ Gangnam Style cost $300k to store and serve○ Cut that in half if we used VP9

■ Especially useful for mobile users

● Need lossless

● To avoid licensing restrictions

http://www.forbes.com/sites/quora/2012/10/29/how-much-did-it-cost-youtube-to-stream-gangnam-style/


Why is this important?


YouTube Statistics

Over 100 Hours of video uploaded every minute

Over 1 Billion unique users every month

Over 6 Billion Hours viewed every month

Over 70% of users are non-US


Demo - VP9 Vs H264

Run

http://localhost/vp9_v_h264/

http://localhost/vp9_v_h264/


At the same bitrate

Run

http://localhost/same_bitrate.html

http://localhost/same_bitrate.html


How to encode a video file : Hands On!

● Get and build FFmpeg with the instructions found here : ○ https://sites.google.com/a/webmproject.org/wiki/ffmpeg/building-with-libvpx

● Record using camera or phone & store on your computer● Run a 2 pass encode like this:

ffmpeg -i MYINPUTFILE -pass 1 -passlogfile t -b:v 350k -auto-alt-ref 1 -vf scale=iw/2:-1 -vcodec libvpx-vp9 -strict experimental MYOUTPUTFILE.webm

ffmpeg -i MYINPUTFILE -pass 2 -passlogfile t -b:v 350k -auto-alt-ref 1 -arnr_max_frames 7 -vf scale=iw/2:-1 -vcodec libvpx-vp9 -strict experimental -acodec libvorbis -b:a 96k MYOUTPUTFILE.webm

● View the results ○ ffplay MYOUTPUTFILE.webm

https://sites.google.com/a/webmproject.org/wiki/ffmpeg/building-with-libvpx

https://sites.google.com/a/webmproject.org/wiki/ffmpeg/building-with-libvpx


Putting Video on a Web Page

● Copy the video file you created to your webserver● Create a web page that looks something like this:

<HTML> <body>

<video src="MYOUTPUTVIDEO.webm" loop="loop" autoplay controls></video> </body></html>

● Make sure your videos have the right permission● Test your new web page. run

http://localhost/demo.htm


Adaptive Bitrate Video

Run

http://localhost/adaptive-encrypted-demo/adaptive/

http://localhost/adaptive-encrypted-demo/adaptive/


Adaptive Bitrate Control

● Follow the instructions here: http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-a-webm-dash-presentation

● Create a manifest file listing separate files at each separate bandwidth

● You’ll be using MediaSource instead of <video> tag…

http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-a-webm-dash-presentation




Green Screen

Run

http://localhost/videoalpha

http://localhost/videoalpha


Green Screen

● Make your own http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video○ Film with a colored back drop○ use an open source tool like Blender to key the color :○ export png or rgba○ convert to WebM using FFmpeg...

● Lots of ways to render○ use <video> tag and just play the video over the background image.○ use <canvas> and draw videos on top of it .

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video




WebGL and Video

Run

http://localhost/glsample

http://localhost/glsample


Using WebGL with the Video Tag

● Draw a video tag ● use gl.createFramebuffer, gl.createRenderbuffer and gl.

createTexture to set up gl buffers● use gl.createShader, gl.shaderSource, gl.compileShader to set up

shaders● use gl.bindTexture to get the data into a webgl texture● use webkitRequestAnimationFrame; to make sure you get every

frame


Subtitles

Run

http://localhost/texttrack

http://localhost/texttrack


Subtitles - http://www.html5rocks.com/en/tutorials/track/basics/

● Creating a WebVtt file like this bbb_subtitles.vtt:WEBVTT

100:00.800 --> 00:02.933This is a Sample Subtitle Track to show off

200:02.933 --> 00:07.333HTML5 VIDEO ACCESSIBILITY AND THE WebVTT FILE FORMAT.

● and refer to it in your HTML <video id="vid1" src="bbb_nosubtitles.webm" controls="true" autoplay> <track kind='subtitles' srclang='en' label='English' src='bbb_subtitles.vtt' default /> </video>


CuePoints

Run

http://localhost/mapTrack/

http://localhost/mapTrack/


Cue Points (http://www.samdutton.net/mapTrack/)

● A simple extension to the webvtt file


Video Conferencing in Javascript

Run

http://localhost/rtcpeerconnection/multi/

http://localhost/rtcpeerconnection/multi/


WebRTC - ( www.webrtc.org )

● http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/● You’ll be using interfaces like

○ getUserMedia ( to get access to the camera and microphone)○ RTCPeerConnection ( to set up connections to the other side)

● getUserMedia will let you do lots of other cool things. :)

http://www.webrtc.org

http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/


Conclusion

● You should use HTML5 for video.● Use VP9.● Do a ton of cool stuff with it.

Any questions? using our mailing list post: [email protected] subscribe: [email protected].

mailto:[email protected]

mailto:[email protected]

mm-4113, vp9 – next generation video for the web, by james bankoski

Technology