CumulusClips - Forums
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:
Change to:
Change from:
Change to:
Note: Video.JS Resolution Selector Copyright by Dominic and licensed via MIT License (opensource): https://github.com/dominic-p/videojs-resolution-selector
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
This discussion has been closed.
Comments
Very cool.
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.