How-To: Implement Video Quality Selector

GreenMotion

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

Damian

Good work. Is there a working demo of this that you can point to?

GreenMotion

Not yet; my CC installation is on an internal network only Let me see if I can setup something externally...

GreenMotion

@Damian; see here: http://orichalcum.us/cc/videos/1/animal-planet/

Damian

That's pretty cool, it works great! I recommend you create a plugin out of this. I'm sure many users would love to incorporate it that way.

Very cool.

GreenMotion

So the video-quality-selector.js file is not my own. I found a reference to it on the videojs.com website somewhere.

Regarding making this into plugin; I am not yet familiar enough with your plugin API and the changes are relatively easy to make, but I will definitely consider it. I guess in the meantime people can use this write-up to implement it on their own.