diff --git a/src/js/player.js b/src/js/player.js index 92c8853b3a..4960e34c22 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -35,6 +35,7 @@ import TextTrackSettings from './tracks/text-track-settings.js'; import ModalDialog from './modal-dialog'; // Require html5 tech, at least for disposing the original video tag +import Tech from './tech/tech.js'; import Html5 from './tech/html5.js'; /** @@ -1653,7 +1654,11 @@ class Player extends Component { // Loop through each playback technology in the options order for (let i = 0, j = this.options_.techOrder; i < j.length; i++) { let techName = toTitleCase(j[i]); - let tech = Component.getComponent(techName); + let tech = Tech.getTech(techName); + + if (!tech) { + tech = Component.getComponent(techName); + } // Check if the current tech is defined before continuing if (!tech) { diff --git a/src/js/tech/flash.js b/src/js/tech/flash.js index 3f13a41fdd..8d6bcc0aae 100644 --- a/src/js/tech/flash.js +++ b/src/js/tech/flash.js @@ -548,4 +548,5 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ FlashRtmpDecorator(Flash); Component.registerComponent('Flash', Flash); +Tech.registerTech('Flash', Flash); export default Flash; diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 645652ad28..8b72a35945 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -1087,4 +1087,5 @@ Html5.disposeMediaElement = function(el){ }; Component.registerComponent('Html5', Html5); +Tech.registerTech('Html5', Html5); export default Html5; diff --git a/src/js/tech/tech.js b/src/js/tech/tech.js index 4b0858cb60..e01862cbfc 100644 --- a/src/js/tech/tech.js +++ b/src/js/tech/tech.js @@ -449,6 +449,42 @@ class Tech extends Component { component instanceof Tech || component === Tech; } + + /** + * Registers a Tech + * + * @param {String} name Name of the Tech to register + * @param {Object} tech The tecj to register + * @static + * @method registerComponent + */ + static registerTech(name, tech) { + if (!Tech.techs_) { + Tech.techs_ = {}; + } + + Tech.techs_[name] = tech; + return tech; + } + + /** + * Gets a component by name + * + * @param {String} name Name of the component to get + * @return {Component} + * @static + * @method getComponent + */ + static getTech(name) { + if (Tech.techs_ && Tech.techs_[name]) { + return Tech.techs_[name]; + } + + if (window && window.videojs && window.videojs[name]) { + log.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`); + return window.videojs[name]; + } + } } /* @@ -649,4 +685,5 @@ Tech.withSourceHandlers = function(_Tech){ Component.registerComponent('Tech', Tech); // Old name for Tech Component.registerComponent('MediaTechController', Tech); +Tech.registerTech('Tech', Tech); export default Tech; diff --git a/src/js/video.js b/src/js/video.js index 15f7ee7e04..a706b0ac6c 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -26,6 +26,7 @@ import createDeprecationProxy from './utils/create-deprecation-proxy.js'; import xhr from 'xhr'; // Include the built-in techs +import Tech from './tech/tech.js'; import Html5 from './tech/html5.js'; import Flash from './tech/flash.js'; @@ -202,7 +203,50 @@ videojs.getComponent = Component.getComponent; * @mixes videojs * @method registerComponent */ -videojs.registerComponent = Component.registerComponent; +videojs.registerComponent = (name, comp) => { + if (Tech.isTech(comp)) { + log.warn(`The ${name} tech was registered as a component. It should instead be registered using videojs.registerTech(name, tech)`); + } + + Component.registerComponent.call(Component, name, comp); +}; + +/** + * Get a Tech class object by name + * ```js + * var Html5 = videojs.getTech('Html5'); + * // Create a new instance of the component + * var html5 = new Html5(options); + * ``` + * + * @return {Tech} Tech identified by name + * @mixes videojs + * @method getComponent + */ +videojs.getTech = Tech.getTech; + +/** + * Register a Tech so it can referred to by name. + * This is used in the tech order for the player. + * + * ```js + * // get the Html5 Tech + * var Html5 = videojs.getTech('Html5'); + * var MyTech = videojs.extend(Html5, {}); + * // Register the new Tech + * VjsButton.registerTech('Tech', MyTech); + * var player = videojs('myplayer', { + * techOrder: ['myTech', 'html5'] + * }); + * ``` + * + * @param {String} The class name of the tech + * @param {Tech} The tech class + * @return {Tech} The newly registered Tech + * @mixes videojs + * @method registerTech + */ +videojs.registerTech = Component.registerTech; /** * A suite of browser and device tests