Flowplayer · VP9 codec for WEBM

format codecs file size (MB) average bit rate (kbps)
WEBM vp9, opus 1.5 189
WEBM vp9, vorbis 1.5 185
WEBM vp8, vorbis 3.1 386
MP4 avc1.42c01e, mp4a.40.5 3.0 354

HTML setup

Video type:

Video src:

JavaScript Setup

Video type:

Video src:

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-color: #ccc;
}

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/drive_vp9.webm" },
// Android < 5 needs ogg/vorbis audio
{ type: "video/webm; codecs=vp9,vorbis",
src: "//edge.flowplayer.org/drive_vp9ogg.webm" },
{ type: "video/webm", src: "//edge.flowplayer.org/drive.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/drive.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/drive_vp9.webm">
<!-- Android < 5 needs ogg/vorbis audio -->
<source type="video/webm; codecs=vp9,vorbis"
src="//edge.flowplayer.org/drive_vp9ogg.webm">
<source type="video/webm" src="//edge.flowplayer.org/drive.webm">
<source type="video/mp4" src="//edge.flowplayer.org/drive.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