Your SlideShare is downloading. ×
MM-4113, Vp9 – Next Generation Video For the Web, by James Bankoski
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

733

Published on

Presentation MM-4113, Vp9 – Next Generation Video For the Web, by James Bankoski, at the AMD Developer Summit (APU13) November 11-13, 2013.

Presentation MM-4113, Vp9 – Next Generation Video For the Web, by James Bankoski, at the AMD Developer Summit (APU13) November 11-13, 2013.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
733
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Developer Summit VP9 - Next Generation Video For the Web
  • 2. 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.
  • 3. VP9 - Next Generation Video For the Web Introduction ● About me ● WebM Project Org (webmproject.org) ● Chrome Media
  • 4. VP9 - Next Generation Video For the Web Benefits of using the Web for Your Video Application ● ● ● ● ● Free deployment Works everywhere Simple to develop Easy usage tracking Functionality
  • 5. VP9 - Next Generation Video For the Web Demo - The Same Video App Running 2 places Run
  • 6. VP9 - Next Generation Video For the Web 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
  • 7. VP9 - Next Generation Video For the Web Why is this important?
  • 8. VP9 - Next Generation Video For the Web 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
  • 9. VP9 - Next Generation Video For the Web
  • 10. VP9 - Next Generation Video For the Web Demo - VP9 Vs H264 Run
  • 11. VP9 - Next Generation Video For the Web At the same bitrate Run
  • 12. VP9 - Next Generation Video For the Web 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
  • 13. VP9 - Next Generation Video For the Web 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
  • 14. VP9 - Next Generation Video For the Web Adaptive Bitrate Video Run
  • 15. VP9 - Next Generation Video For the Web 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…
  • 16. VP9 - Next Generation Video For the Web Green Screen Run
  • 17. VP9 - Next Generation Video For the Web 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 .
  • 18. VP9 - Next Generation Video For the Web WebGL and Video Run
  • 19. VP9 - Next Generation Video For the Web 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
  • 20. VP9 - Next Generation Video For the Web Subtitles Run
  • 21. VP9 - Next Generation Video For the Web 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>
  • 22. VP9 - Next Generation Video For the Web CuePoints Run
  • 23. VP9 - Next Generation Video For the Web Cue Points (http://www.samdutton.net/mapTrack/) ● A simple extension to the webvtt file
  • 24. VP9 - Next Generation Video For the Web Video Conferencing in Javascript Run
  • 25. VP9 - Next Generation Video For the Web 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. :)
  • 26. VP9 - Next Generation Video For the Web 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.

×