Flowplayer · VP9 codec for WEBM

format codecs file size (MB) average bit rate (kbps)
WEBM vp9, opus 9.3 424
WEBM vp9, vorbis 9.4 426
WEBM vp8, vorbis 17 788
MP4 avc1.42c01e, mp4a.40.5 17 790

HTML setup

Video type:

Video src:

JavaScript Setup

Video type:

Video src:

Video courtesy of Figs In Wigs

Important: For VP9 the video type specification must include codecs, so browsers which can only play VP8 can detect this and fall back to VP8. The same applies to the opus and vorbis audio codecs.

<head/>

<style>

.flowplayer {
background-image: url(http://demos.flowplayer.org/media/img/figsinwigs.jpg);
background-color: #f60;
}

CSS

<script>

// show video info on load
flowplayer(function (api, root) {
api.on("load", function (e, api, video) {
pindex = $(".flowplayer").index(root);
$(".vtype").eq(pindex).text(video.type);
$(".vsrc").eq(pindex).text(video.src);
})
});
 

$(function () {
 
flowplayer("#vp9js", {
ratio: 9/16,
clip: {
sources: [
// codecs values must be in double quotes
// or unquoted without space after comma
{ type: "video/webm; codecs=vp9,opus",
src: "//edge.flowplayer.org/cilla_black_bean_sauce_vp9.webm" },
// Android < 5 needs ogg/vorbis audio
{ type: "video/webm; codecs=vp9,vorbis",
src: "//edge.flowplayer.org/cilla_black_bean_sauce_vp9ogg.webm" },
{ type: "video/webm", src: "//edge.flowplayer.org/cilla_black_bean_sauce.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/cilla_black_bean_sauce.mp4" }
]
}
});
 
});

JavaScript

<body/>

<div class="flowplayer is-splash" data-ratio="0.5625">
<video>
<!-- codecs values must be in double quotes
or unquoted without space after comma -->
<source type="video/webm; codecs=vp9,opus"
src="//edge.flowplayer.org/cilla_black_bean_sauce_vp9.webm">
<!-- Android < 5 needs ogg/vorbis audio -->
<source type="video/webm; codecs=vp9,vorbis"
src="//edge.flowplayer.org/cilla_black_bean_sauce_vp9ogg.webm">
<source type="video/webm"
src="//edge.flowplayer.org/cilla_black_bean_sauce.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/cilla_black_bean_sauce.mp4">
</video>
</div>
 
<div class="info">
<p>Video type: <span class="vtype"></span>
 
<p>Video src: <span class="vsrc"></span>
</div>
 
<!-- ... -->
 
<div id="vp9js" class="is-splash"></div>
 
<div class="info">
<p>Video type: <span class="vtype"></span>
 
<p>Video src: <span class="vsrc"></span>
</div>

HTML