MM-4113, Vp9 – Next Generation Video For the Web, by James Bankoski

Developer Summit

VP9 - Next Generation
Video For the Web

VP9 - Next Generation Video For the Web

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


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


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


At the same bitrate

Run


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


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


Adaptive Bitrate Video

Run


Adaptive Bitrate Control
● Follow the instructions here: http://wiki.webmproject.org/adaptivestreaming/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…


Green Screen

Run


Green Screen
● Make your own http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chromevideo

○
○
○
○

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 .


WebGL and Video

Run


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


Subtitles - http://www.html5rocks.com/en/tutorials/track/basics/
● Creating a WebVtt file like this bbb_subtitles.vtt:
WEBVTT
1
00:00.800 --> 00:02.933
This is a Sample Subtitle Track to show off
2
00:02.933 --> 00:07.333
HTML5 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


Cue Points (http://www.samdutton.net/mapTrack/)
● A simple extension to the webvtt file


Video Conferencing in Javascript

Run


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. :)


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

Any questions? using our mailing list
post: webm-discuss@webmproject.org
subscribe: webm-discuss+subscribe@webmproject.org.

MM-4113, Vp9 – Next Generation Video For the Web, by James Bankoski

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de AMD Developer Central

Mais de AMD Developer Central (20)

Último

Último (20)

MM-4113, Vp9 – Next Generation Video For the Web, by James Bankoski