I am looking into offering variable resolutions/bitrates and there is a video.js plugin that provides that functionality here https://github.com/vidcaster/video-js-resolutions (with a few significant caviats in its current version).

I am wondering what is the most reasonable way to implement a video.js plugin with the module, should the javascript be loaded from a custom module or is there a better way?

Comments

Jorrit’s picture

The JS and CSS need to be included via, for example, your theme. The data-resolution attribute can be added via a template override.

Beanjammin’s picture

Thanks for the follow up Jorrit, much appreciated!

mglaman’s picture

Issue summary: View changes
Status: Active » Fixed

Support request was answered.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

pawel_r’s picture

Status: Closed (fixed) » Active

Please help,
all I get after adding plugin files (link) is:

ReferenceError: videojs is not defined

How to refer to videojs object (and add plugin)?

videojs: 4.12.7
module: 7.x-2.3

pawel_r’s picture

Status: Active » Fixed

ehhh... so stupid...

Wrong module version... 7.x-3.0 is using videojs v4, then just changes in copy of videojs.tpl.php file and everything works smoothly.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

terminology’s picture

i still dont know how to add video.js plugins in drupal

pawel_r’s picture

@terminology

Library with plugin should be placed in libraries directory.

Example with 'resolution selector' plugin, example.tpl.php file:

<?php
/*
 * Add resolution picker js and css
 */
$path = libraries_get_path('videojs-resolution-selector');
drupal_add_js($path . '/video-quality-selector.js');
drupal_add_css($path . '/video-quality-selector.css', array('group' => CSS_THEME, 'type' => 'file'));

$resolutions = array('720', '480');
?>
<?php if (!empty($items)): ?>
    <video id="<?php print $player_id; ?>-video" 
           class="video-js vjs-default-skin"
           width="<?php print($width) ?>" 
           height="<?php print($height) ?>" 
           controls="controls"
           preload="auto"
           data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "720" } } }'
           >
        <?php foreach ($items as $idx => $item): ?>
            <source src="<?php print check_plain(file_create_url($item['uri'])) ?>" type="<?php print check_plain($item['videotype']) ?>" data-res="<?php print $resolutions[$idx]; ?>" />
        <?php endforeach; ?>
    </video>
<?php endif; ?>
terminology’s picture

i put all the plugins in the libraries directory like pre rool plugin, but have no way to configure them