Chrome With WebM Version 9 (VP9)

Posted at

The WebM project, is closely integrated with Chromium,
and finally (Chrome beta v60+) you can properly display webm that encoded with VP9.

VP9 supports the full range of web and mobile use cases from low bitrate compression to high-quality ultra-HD, with additional support for 10/12-bit encoding and HDR.

VP9 can reduce video bit rates by as much as 50% compared with other known codecs. It is supported for adaptive streaming and is used by YouTube as well as other leading web video providers.

VP9 decoding is supported on over 2 billion end points including Chrome, Opera, Edge, Firefox and Android devices, as well as millions of smart TVs.

To encode, simply grab any media-file, and the latest FFMPEG,
read through this helpful page:

here is an example (for Windows)
ffmpeg.exe  -i "input.mp4" -c:v "libvpx-vp9" -b:v 2M -c:a "libopus" -pass 1 -f webm   nul           &&  ^
ffmpeg.exe  -i "input.mp4" -c:v "libvpx-vp9" -b:v 2M -c:a "libopus" -pass 2           "output.webm"

Here are a bit more advanced encoding options, using ffmpeg,
from the Google-maintained documentation for WebM: (for content-creators).
or (older) from here:
And- you can make things even easier,
by using (with the VP9 modification above) the code from this article:
iCompile - FFmpeg – Everything To WebM – Drag&Drop!.

When to use the new encoding?
you are encouraged to provide an alternative (VP8), just for good measures..
but also an additional VP9, properly-encoded, video-source,
- for example:
<video poster="movie.jpg" controls>
  <source src="movie.webm" type='video/webm;codecs="vp8,vorbis"'>
  <source src="movie.webm" type='video/webm;codecs="vp09.00.10.08,opus"'>

  <source src="movie.ogv" type='video/ogg;codecs="theora,vorbis"'>
  <source src="movie.mp4" type='video/mp4;codecs="avc1.4D401E,mp4a.40.2"'>
  <p>Fallback message. No support for HTML5 video tag.</p>

You can be more specific about the codecs-string,
but it is totally up to you..
Here some additional examples, btw. did you know you can test the support using the JS' MediaSource class? ha!