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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von AMD Developer Central

Mehr von AMD Developer Central (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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