This page shows you how to create, register and initialize a Video.js plugin.
22 | 23 | 29 | 30 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/js/control-bar/play-toggle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file play-toggle.js 3 | */ 4 | import Button from '../button.js'; 5 | import Component from '../component.js'; 6 | 7 | /** 8 | * Button to toggle between play and pause 9 | * 10 | * @param {Player|Object} player 11 | * @param {Object=} options 12 | * @extends Button 13 | * @class PlayToggle 14 | */ 15 | class PlayToggle extends Button { 16 | 17 | constructor(player, options){ 18 | super(player, options); 19 | 20 | this.on(player, 'play', this.handlePlay); 21 | this.on(player, 'pause', this.handlePause); 22 | } 23 | 24 | /** 25 | * Allow sub components to stack CSS class names 26 | * 27 | * @return {String} The constructed class name 28 | * @method buildCSSClass 29 | */ 30 | buildCSSClass() { 31 | return `vjs-play-control ${super.buildCSSClass()}`; 32 | } 33 | 34 | /** 35 | * Handle click to toggle between play and pause 36 | * 37 | * @method handleClick 38 | */ 39 | handleClick() { 40 | if (this.player_.paused()) { 41 | this.player_.play(); 42 | } else { 43 | this.player_.pause(); 44 | } 45 | } 46 | 47 | /** 48 | * Add the vjs-playing class to the element so it can change appearance 49 | * 50 | * @method handlePlay 51 | */ 52 | handlePlay() { 53 | this.removeClass('vjs-paused'); 54 | this.addClass('vjs-playing'); 55 | this.controlText('Pause'); // change the button text to "Pause" 56 | } 57 | 58 | /** 59 | * Add the vjs-paused class to the element so it can change appearance 60 | * 61 | * @method handlePause 62 | */ 63 | handlePause() { 64 | this.removeClass('vjs-playing'); 65 | this.addClass('vjs-paused'); 66 | this.controlText('Play'); // change the button text to "Play" 67 | } 68 | 69 | } 70 | 71 | PlayToggle.prototype.controlText_ = 'Play'; 72 | 73 | Component.registerComponent('PlayToggle', PlayToggle); 74 | export default PlayToggle; 75 | -------------------------------------------------------------------------------- /src/js/control-bar/progress-control/play-progress-bar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file play-progress-bar.js 3 | */ 4 | import Component from '../../component.js'; 5 | import * as Fn from '../../utils/fn.js'; 6 | import * as Dom from '../../utils/dom.js'; 7 | import formatTime from '../../utils/format-time.js'; 8 | 9 | /** 10 | * Shows play progress 11 | * 12 | * @param {Player|Object} player 13 | * @param {Object=} options 14 | * @extends Component 15 | * @class PlayProgressBar 16 | */ 17 | class PlayProgressBar extends Component { 18 | 19 | constructor(player, options){ 20 | super(player, options); 21 | this.updateDataAttr(); 22 | this.on(player, 'timeupdate', this.updateDataAttr); 23 | player.ready(Fn.bind(this, this.updateDataAttr)); 24 | 25 | if (options.playerOptions && 26 | options.playerOptions.controlBar && 27 | options.playerOptions.controlBar.progressControl && 28 | options.playerOptions.controlBar.progressControl.keepTooltipsInside) { 29 | this.keepTooltipsInside = options.playerOptions.controlBar.progressControl.keepTooltipsInside; 30 | } 31 | 32 | if (this.keepTooltipsInside) { 33 | this.addClass('vjs-keep-tooltips-inside'); 34 | } 35 | } 36 | 37 | /** 38 | * Create the component's DOM element 39 | * 40 | * @return {Element} 41 | * @method createEl 42 | */ 43 | createEl() { 44 | return super.createEl('div', { 45 | className: 'vjs-play-progress vjs-slider-bar', 46 | innerHTML: `${this.localize('Progress')}: 0%` 47 | }); 48 | } 49 | 50 | updateDataAttr() { 51 | let time = (this.player_.scrubbing()) ? this.player_.getCache().currentTime : this.player_.currentTime(); 52 | this.el_.setAttribute('data-current-time', formatTime(time, this.player_.duration())); 53 | } 54 | 55 | } 56 | 57 | Component.registerComponent('PlayProgressBar', PlayProgressBar); 58 | export default PlayProgressBar; 59 | -------------------------------------------------------------------------------- /test/unit/utils/log.test.js: -------------------------------------------------------------------------------- 1 | import log from '../../../src/js/utils/log.js'; 2 | import window from 'global/window'; 3 | 4 | q.module('log'); 5 | 6 | test('should confirm logging functions work', function() { 7 | let origConsole = window['console']; 8 | // replace the native console for testing 9 | // in ie8 console.log is apparently not a 'function' so sinon chokes on it 10 | // https://github.com/cjohansen/Sinon.JS/issues/386 11 | // instead we'll temporarily replace them with no-op functions 12 | let console = window['console'] = { 13 | log: function(){}, 14 | warn: function(){}, 15 | error: function(){} 16 | }; 17 | 18 | // stub the global log functions 19 | let logStub = sinon.stub(console, 'log'); 20 | let errorStub = sinon.stub(console, 'error'); 21 | let warnStub = sinon.stub(console, 'warn'); 22 | 23 | // Reset the log history 24 | log.history = []; 25 | 26 | log('log1', 'log2'); 27 | log.warn('warn1', 'warn2'); 28 | log.error('error1', 'error2'); 29 | 30 | ok(logStub.called, 'log was called'); 31 | equal(logStub.firstCall.args[0], 'VIDEOJS:'); 32 | equal(logStub.firstCall.args[1], 'log1'); 33 | equal(logStub.firstCall.args[2], 'log2'); 34 | 35 | ok(warnStub.called, 'warn was called'); 36 | equal(warnStub.firstCall.args[0], 'VIDEOJS:'); 37 | equal(warnStub.firstCall.args[1], 'WARN:'); 38 | equal(warnStub.firstCall.args[2], 'warn1'); 39 | equal(warnStub.firstCall.args[3], 'warn2'); 40 | 41 | ok(errorStub.called, 'error was called'); 42 | equal(errorStub.firstCall.args[0], 'VIDEOJS:'); 43 | equal(errorStub.firstCall.args[1], 'ERROR:'); 44 | equal(errorStub.firstCall.args[2], 'error1'); 45 | equal(errorStub.firstCall.args[3], 'error2'); 46 | 47 | equal(log.history.length, 3, 'there should be three messages in the log history'); 48 | 49 | // tear down sinon 50 | logStub.restore(); 51 | errorStub.restore(); 52 | warnStub.restore(); 53 | 54 | // restore the native console 55 | window['console'] = origConsole; 56 | }); 57 | -------------------------------------------------------------------------------- /src/js/tech/loader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file loader.js 3 | */ 4 | import Component from '../component.js'; 5 | import Tech from './tech.js'; 6 | import window from 'global/window'; 7 | import toTitleCase from '../utils/to-title-case.js'; 8 | 9 | /** 10 | * The Media Loader is the component that decides which playback technology to load 11 | * when the player is initialized. 12 | * 13 | * @param {Object} player Main Player 14 | * @param {Object=} options Object of option names and values 15 | * @param {Function=} ready Ready callback function 16 | * @extends Component 17 | * @class MediaLoader 18 | */ 19 | class MediaLoader extends Component { 20 | 21 | constructor(player, options, ready){ 22 | super(player, options, ready); 23 | 24 | // If there are no sources when the player is initialized, 25 | // load the first supported playback technology. 26 | 27 | if (!options.playerOptions['sources'] || options.playerOptions['sources'].length === 0) { 28 | for (let i=0, j=options.playerOptions['techOrder']; iYou can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.
23 |cp sandbox/index.html.example sandbox/index.html24 |
grunt watch25 |
grunt connect26 |
open http://localhost:9999/sandbox/index.html27 |
This is a list of all of the icons available in the Video.js base stylesheet. The appropriate class is to the right of each icon.
16 | 17 |.vjs-icon-play.vjs-icon-pause.vjs-icon-volume-mute.vjs-icon-volume-low.vjs-icon-volume-mid.vjs-icon-volume-high.vjs-icon-fullscreen-enter.vjs-icon-fullscreen-exit.vjs-icon-square.vjs-icon-spinner.vjs-icon-subtitles.vjs-icon-captions.vjs-icon-chapters.vjs-icon-share.vjs-icon-cog.vjs-icon-circle.vjs-icon-circle-outline.vjs-icon-circle-inner-circleThis page demonstrates a text descriptions track (intended primarily for blind and visually impaired consumers of visual media)
23 | 24 | 28 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/js/extend.js: -------------------------------------------------------------------------------- 1 | import log from './utils/log'; 2 | 3 | /* 4 | * @file extend.js 5 | * 6 | * A combination of node inherits and babel's inherits (after transpile). 7 | * Both work the same but node adds `super_` to the subClass 8 | * and Bable adds the superClass as __proto__. Both seem useful. 9 | */ 10 | const _inherits = function (subClass, superClass) { 11 | if (typeof superClass !== 'function' && superClass !== null) { 12 | throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); 13 | } 14 | 15 | subClass.prototype = Object.create(superClass && superClass.prototype, { 16 | constructor: { 17 | value: subClass, 18 | enumerable: false, 19 | writable: true, 20 | configurable: true 21 | } 22 | }); 23 | 24 | if (superClass) { 25 | // node 26 | subClass.super_ = superClass; 27 | } 28 | }; 29 | 30 | /* 31 | * Function for subclassing using the same inheritance that 32 | * videojs uses internally 33 | * ```js 34 | * var Button = videojs.getComponent('Button'); 35 | * ``` 36 | * ```js 37 | * var MyButton = videojs.extend(Button, { 38 | * constructor: function(player, options) { 39 | * Button.call(this, player, options); 40 | * }, 41 | * onClick: function() { 42 | * // doSomething 43 | * } 44 | * }); 45 | * ``` 46 | */ 47 | const extendFn = function(superClass, subClassMethods={}) { 48 | let subClass = function() { 49 | superClass.apply(this, arguments); 50 | }; 51 | let methods = {}; 52 | 53 | if (typeof subClassMethods === 'object') { 54 | if (typeof subClassMethods.init === 'function') { 55 | log.warn('Constructor logic via init() is deprecated; please use constructor() instead.'); 56 | subClassMethods.constructor = subClassMethods.init; 57 | } 58 | if (subClassMethods.constructor !== Object.prototype.constructor) { 59 | subClass = subClassMethods.constructor; 60 | } 61 | methods = subClassMethods; 62 | } else if (typeof subClassMethods === 'function') { 63 | subClass = subClassMethods; 64 | } 65 | 66 | _inherits(subClass, superClass); 67 | 68 | // Extend subObj's prototype with functions and other properties from props 69 | for (var name in methods) { 70 | if (methods.hasOwnProperty(name)) { 71 | subClass.prototype[name] = methods[name]; 72 | } 73 | } 74 | 75 | return subClass; 76 | }; 77 | 78 | export default extendFn; 79 | -------------------------------------------------------------------------------- /src/js/control-bar/progress-control/load-progress-bar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file load-progress-bar.js 3 | */ 4 | import Component from '../../component.js'; 5 | import * as Dom from '../../utils/dom.js'; 6 | 7 | /** 8 | * Shows load progress 9 | * 10 | * @param {Player|Object} player 11 | * @param {Object=} options 12 | * @extends Component 13 | * @class LoadProgressBar 14 | */ 15 | class LoadProgressBar extends Component { 16 | 17 | constructor(player, options){ 18 | super(player, options); 19 | this.on(player, 'progress', this.update); 20 | } 21 | 22 | /** 23 | * Create the component's DOM element 24 | * 25 | * @return {Element} 26 | * @method createEl 27 | */ 28 | createEl() { 29 | return super.createEl('div', { 30 | className: 'vjs-load-progress', 31 | innerHTML: `${this.localize('Loaded')}: 0%` 32 | }); 33 | } 34 | 35 | /** 36 | * Update progress bar 37 | * 38 | * @method update 39 | */ 40 | update() { 41 | let buffered = this.player_.buffered(); 42 | let duration = this.player_.duration(); 43 | let bufferedEnd = this.player_.bufferedEnd(); 44 | let children = this.el_.children; 45 | 46 | // get the percent width of a time compared to the total end 47 | let percentify = function (time, end){ 48 | let percent = (time / end) || 0; // no NaN 49 | return ((percent >= 1 ? 1 : percent) * 100) + '%'; 50 | }; 51 | 52 | // update the width of the progress bar 53 | this.el_.style.width = percentify(bufferedEnd, duration); 54 | 55 | // add child elements to represent the individual buffered time ranges 56 | for (let i = 0; i < buffered.length; i++) { 57 | let start = buffered.start(i); 58 | let end = buffered.end(i); 59 | let part = children[i]; 60 | 61 | if (!part) { 62 | part = this.el_.appendChild(Dom.createEl()); 63 | } 64 | 65 | // set the percent based on the width of the progress bar (bufferedEnd) 66 | part.style.left = percentify(start, bufferedEnd); 67 | part.style.width = percentify(end - start, bufferedEnd); 68 | } 69 | 70 | // remove unused buffered range elements 71 | for (let i = children.length; i > buffered.length; i--) { 72 | this.el_.removeChild(children[i-1]); 73 | } 74 | } 75 | 76 | } 77 | 78 | Component.registerComponent('LoadProgressBar', LoadProgressBar); 79 | export default LoadProgressBar; 80 | -------------------------------------------------------------------------------- /sandbox/descriptions.html.example: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |