How-To: Implement Video Quality Selector

This document describes how to implement a Video Quality Selector toggle on your video player. Since CC's MP4 settings already allow for two MP4 streams (a regular and a mobile one), why not allow the user on the default player theme to toggle between the two?

In my case, my regular videos are encoded at 1280 (720p) while the mobile-optimized version is encoded at 480p. To allow a switch to toggle between these two, do the following:

1. Copy https://raw.githubusercontent.com/dominic-p/videojs-resolution-selector/master/button-styles.css to {cc-home}/cc-content/themes/default/css/button-styles.css

2. Copy https://raw.githubusercontent.com/dominic-p/videojs-resolution-selector/master/video-quality-selector.js to {cc-home}/cc-content/themes/default/js/video-quality-selector.js

3. Edit {cc-home}/cc-content/themes/default/play.phtml and make the following modifications:

Change from:

<?php
$this->addMeta('videoId', $video->videoId);
$this->addMeta('theme', $this->options->themeUrl);
$this->addMeta('loggedIn', (boolean) $loggedInUser);
$this->addCss('video-js.css');
$this->addCss('jscrollpane.css');
$this->addJs('video.plugin.js');
$this->addJs('jscrollpane.plugin.js');
$this->addJs('mousewheel.plugin.js');
$this->setLayout('full');
?>


Change to:

<?php
$this->addMeta('videoId', $video->videoId);
$this->addMeta('theme', $this->options->themeUrl);
$this->addMeta('loggedIn', (boolean) $loggedInUser);
$this->addCss('video-js.css');
$this->addCss('button-styles.css');
$this->addCss('jscrollpane.css');
$this->addJs('video.plugin.js');
$this->addJs('video-quality-selector.js');
$this->addJs('jscrollpane.plugin.js');
$this->addJs('mousewheel.plugin.js');
$this->setLayout('full');
?>


Change from:

<!-- BEGIN VIDEO -->
<div id="player">
<video class="video-js vjs-default-skin" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }' width="600" height="337" poster="<?=$config->thumbUrl?>/<?=$video->filename?>.jpg">
<source src="<?=$config->h264Url?>/<?=$video->filename?>.mp4" type="video/mp4" />
<?php if ($webmEncodingEnabled): ?>
<source src="<?=$config->webmUrl?>/<?=$video->filename?>.webm" type="video/webm" />
<?php endif; ?>
<?php if ($theoraEncodingEnabled): ?>
<source src="<?=$config->theoraUrl?>/<?=$video->filename?>.ogg" type="video/ogg" />
<?php endif; ?>
</video>
</div>
<!-- END VIDEO -->


Change to:

<!-- BEGIN VIDEO -->
<div id="player">
<video class="video-js vjs-default-skin" data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "720" } }, "controls": true, "autoplay": true, "preload": "auto" }' width="600" height="337" poster="<?=$config->thumbUrl?>/<?=$video->filename?>.jpg">
<source src="<?=$config->h264Url?>/<?=$video->filename?>.mp4" type="video/mp4" data-res="720"/>
<source src="<?=$config->mobileUrl?>/<?=$video->filename?>.mp4" type="video/mp4" data-res="480"/>
<?php if ($webmEncodingEnabled): ?>
<source src="<?=$config->webmUrl?>/<?=$video->filename?>.webm" type="video/webm" />
<?php endif; ?>
<?php if ($theoraEncodingEnabled): ?>
<source src="<?=$config->theoraUrl?>/<?=$video->filename?>.ogg" type="video/ogg" />
<?php endif; ?>
</video>
</div>
<!-- END VIDEO -->



Note: Video.JS Resolution Selector Copyright by Dominic and licensed via MIT License (opensource): https://github.com/dominic-p/videojs-resolution-selector