JavaScript video.js 源码分析
JacWaterfie
8年前
<ul> <li> <p>video.js 源码分析（JavaScript）</p> <ul> <li> <p>组织结构</p> </li> <li> <p>继承关系</p> </li> <li> <p>运行机制</p> </li> <li> <p>插件的运行机制</p> <ul> <li> <p>插件的定义</p> </li> <li> <p>插件的运行</p> </li> </ul> </li> <li> <p>控制条是如何运行的</p> </li> <li> <p>UI与JavaScript对象的衔接</p> </li> <li> <p>类的挂载方式</p> <ul> <li> <p>存储</p> </li> <li> <p>获取</p> </li> </ul> </li> </ul> </li> </ul> <h3><strong>组织结构</strong></h3> <p>以下是video.js的源码组织结构关系，涉及控制条、菜单、浮层、进度条、滑动块、多媒体、音轨字幕、辅助函数集合等等。</p> <pre> <code class="language-javascript">├── control-bar │ ├── audio-track-controls │ │ ├── audio-track-button.js │ │ └── audio-track-menu-item.js │ ├── playback-rate-menu │ │ ├── playback-rate-menu-button.js │ │ └── playback-rate-menu-item.js │ ├── progress-control │ │ ├── load-progress-bar.js │ │ ├── mouse-time-display.js │ │ ├── play-progress-bar.js │ │ ├── progress-control.js │ │ ├── seek-bar.js │ │ └── tooltip-progress-bar.js │ ├── spacer-controls │ │ ├── custom-control-spacer.js │ │ └── spacer.js │ ├── text-track-controls │ │ ├── caption-settings-menu-item.js │ │ ├── captions-button.js │ │ ├── chapters-button.js │ │ ├── chapters-track-menu-item.js │ │ ├── descriptions-button.js │ │ ├── off-text-track-menu-item.js │ │ ├── subtitles-button.js │ │ ├── text-track-button.js │ │ └── text-track-menu-item.js │ ├── time-controls │ │ ├── current-time-display.js │ │ ├── duration-display.js │ │ ├── remaining-time-display.js │ │ └── time-divider.js │ ├── volume-control │ │ ├── volume-bar.js │ │ ├── volume-control.js │ │ └── volume-level.js │ ├── control-bar.js │ ├── fullscreen-toggle.js │ ├── live-display.js │ ├── mute-toggle.js │ ├── play-toggle.js │ ├── track-button.js │ └── volume-menu-button.js ├── menu │ ├── menu-button.js │ ├── menu-item.js │ └── menu.js ├── popup │ ├── popup-button.js │ └── popup.js ├── progress-bar │ ├── progress-control │ │ ├── load-progress-bar.js │ │ ├── mouse-time-display.js │ │ ├── play-progress-bar.js │ │ ├── progress-control.js │ │ ├── seek-bar.js │ │ └── tooltip-progress-bar.js │ └── progress-bar.js ├── slider │ └── slider.js ├── tech │ ├── flash-rtmp.js │ ├── flash.js │ ├── html5.js │ ├── loader.js │ └── tech.js ├── tracks │ ├── audio-track-list.js │ ├── audio-track.js │ ├── html-track-element-list.js │ ├── html-track-element.js │ ├── text-track-cue-list.js │ ├── text-track-display.js │ ├── text-track-list-converter.js │ ├── text-track-list.js │ ├── text-track-settings.js │ ├── text-track.js │ ├── track-enums.js │ ├── track-list.js │ ├── track.js │ ├── video-track-list.js │ └── video-track.js ├── utils │ ├── browser.js │ ├── buffer.js │ ├── dom.js │ ├── events.js │ ├── fn.js │ ├── format-time.js │ ├── guid.js │ ├── log.js │ ├── merge-options.js │ ├── stylesheet.js │ ├── time-ranges.js │ ├── to-title-case.js │ └── url.js ├── big-play-button.js ├── button.js ├── clickable-component.js ├── close-button.js ├── component.js ├── error-display.js ├── event-target.js ├── extend.js ├── fullscreen-api.js ├── loading-spinner.js ├── media-error.js ├── modal-dialog.js ├── player.js ├── plugins.js ├── poster-image.js ├── setup.js └── video.js</code></pre> <p>video.js的JavaScript部分都是采用面向对象方式来实现的。基类是Component，所有其他的类都是直接或间接集成此类实现。语法部分采用的是ES6标准。</p> <h3><strong>继承关系</strong></h3> <p>深入源码解读需要了解类与类之间的继承关系，直接上图。</p> <ul> <li> <p>所有的继承关系</p> <img src="https://simg.open-open.com/show/46af49f9b2d6bbf104805dfd479287c0.png"></li> <li> <p>主要的继承关系</p> <img src="https://simg.open-open.com/show/bd4091270d286247af919972461a55e5.png"></li> </ul> <h3><strong>运行机制</strong></h3> <p>首先调用videojs启动播放器，videojs方法判断当前id是否已被实例化，如果没有实例化新建一个Player对象，因Player继承Component会自动初始化Component类。如果已经实例化直接返回Player对象。</p> <p>videojs方法源码如下：</p> <pre> <code class="language-javascript">function videojs(id, options, ready) { let tag; // id可以是选择器也可以是DOM节点 if (typeof id === 'string') { if (id.indexOf('#') === 0) { id = id.slice(1); } //检查播放器是否已被实例化 if (videojs.getPlayers()[id]) { if (options) { log.warn(`Player "${id}" is already initialised. Options will not be applied.`); } if (ready) { videojs.getPlayers()[id].ready(ready); } return videojs.getPlayers()[id]; } // 如果播放器没有实例化，返回DOM节点 tag = Dom.getEl(id); } else { // 如果是DOM节点直接返回 tag = id; } if (!tag || !tag.nodeName) { throw new TypeError('The element or ID supplied is not valid. (videojs)'); } // 返回播放器实例 return tag.player || Player.players[tag.playerId] || new Player(tag, options, ready); } []()</code></pre> <p>接下来我们看下Player的构造函数，代码如下：</p> <pre> <code class="language-javascript">constructor(tag, options, ready) { // 注意这个tag是video原生标签 tag.id = tag.id || `vjs_video_${Guid.newGUID()}`; // 选项配置的合并 options = assign(Player.getTagSettings(tag), options); // 这个选项要关掉否则会在父类自动执行加载子类集合 options.initChildren = false; // 调用父类的createEl方法 options.createEl = false; // 在移动端关掉手势动作监听 options.reportTouchActivity = false; // 检查播放器的语言配置 if (!options.language) { if (typeof tag.closest === 'function') { const closest = tag.closest('[lang]'); if (closest) { options.language = closest.getAttribute('lang'); } } else { let element = tag; while (element && element.nodeType === 1) { if (Dom.getElAttributes(element).hasOwnProperty('lang')) { options.language = element.getAttribute('lang'); break; } element = element.parentNode; } } } // 初始化父类 super(null, options, ready); // 检查当前对象必须包含techOrder参数 if (!this.options_ || !this.options_.techOrder || !this.options_.techOrder.length) { throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?'); } // 存储当前已被实例化的播放器 this.tag = tag; // 存储video标签的各个属性 this.tagAttributes = tag && Dom.getElAttributes(tag); // 将默认的英文切换到指定的语言 this.language(this.options_.language); if (options.languages) { const languagesToLower = {}; Object.getOwnPropertyNames(options.languages).forEach(function(name) { languagesToLower[name.toLowerCase()] = options.languages[name]; }); this.languages_ = languagesToLower; } else { this.languages_ = Player.prototype.options_.languages; } // 缓存各个播放器的各个属性. this.cache_ = {}; // 设置播放器的贴片 this.poster_ = options.poster || ''; // 设置播放器的控制 this.controls_ = !!options.controls; // 默认是关掉控制 tag.controls = false; this.scrubbing_ = false; this.el_ = this.createEl(); const playerOptionsCopy = mergeOptions(this.options_); // 自动加载播放器插件 if (options.plugins) { const plugins = options.plugins; Object.getOwnPropertyNames(plugins).forEach(function(name) { if (typeof this[name] === 'function') { this[name](plugins[name]); } else { log.error('Unable to find plugin:', name); } }, this); } this.options_.playerOptions = playerOptionsCopy; this.initChildren(); // 判断是不是音频 this.isAudio(tag.nodeName.toLowerCase() === 'audio'); if (this.controls()) { this.addClass('vjs-controls-enabled'); } else { this.addClass('vjs-controls-disabled'); } this.el_.setAttribute('role', 'region'); if (this.isAudio()) { this.el_.setAttribute('aria-label', 'audio player'); } else { this.el_.setAttribute('aria-label', 'video player'); } if (this.isAudio()) { this.addClass('vjs-audio'); } if (this.flexNotSupported_()) { this.addClass('vjs-no-flex'); } if (!browser.IS_IOS) { this.addClass('vjs-workinghover'); } Player.players[this.id_] = this; this.userActive(true); this.reportUserActivity(); this.listenForUserActivity_(); this.on('fullscreenchange', this.handleFullscreenChange_); this.on('stageclick', this.handleStageClick_); }</code></pre> <p>在Player的构造器中有一句 super(null, options, ready); 实例化父类Component。我们来看下Component的构造函数：</p> <pre> <code class="language-javascript">constructor(player, options, ready) { // 之前说过所有的类都是继承Component，不是所有的类需要传player if (!player && this.play) { // 这里判断调用的对象是不是Player本身，是本身只需要返回自己 this.player_ = player = this; // eslint-disable-line } else { this.player_ = player; } this.options_ = mergeOptions({}, this.options_); options = this.options_ = mergeOptions(this.options_, options); this.id_ = options.id || (options.el && options.el.id); if (!this.id_) { const id = player && player.id && player.id() || 'no_player'; this.id_ = `${id}_component_${Guid.newGUID()}`; } this.name_ = options.name || null; if (options.el) { this.el_ = options.el; } else if (options.createEl !== false) { this.el_ = this.createEl(); } this.children_ = []; this.childIndex_ = {}; this.childNameIndex_ = {}; // 知道Player的构造函数为啥要设置initChildren为false了吧 if (options.initChildren !== false) { // 这个initChildren方法是将一个类的子类都实例化，一个类都对应着自己的el（DOM实例），通过这个方法父类和子类的DOM继承关系也就实现了 this.initChildren(); } this.ready(ready); if (options.reportTouchActivity !== false) { this.enableTouchActivity(); } }</code></pre> <h3><strong>插件的运行机制</strong></h3> <p>插件的定义</p> <pre> <code class="language-javascript">import Player from './player.js'; // 将插件种植到Player的原型链 const plugin = function(name, init) { Player.prototype[name] = init; }; // 暴露plugin接口 videojs.plugin = plugin;</code></pre> <p>插件的运行</p> <pre> <code class="language-javascript">// 在Player的构造函数里判断是否使用了插件，如果有遍历执行 if (options.plugins) { const plugins = options.plugins; Object.getOwnPropertyNames(plugins).forEach(function(name) { if (typeof this[name] === 'function') { this[name](plugins[name]); } else { log.error('Unable to find plugin:', name); } }, this); }</code></pre> <h3><strong>控制条是如何运行的</strong></h3> <pre> <code class="language-javascript">Player.prototype.options_ = { // 此处表示默认使用html5的video标签 techOrder: ['html5', 'flash'], html5: {}, flash: {}, // 默认的音量，官方代码该配置无效有bug，我们已修复, defaultVolume: 0.85, // 用户的交互时长，比如超过这个时间表示失去焦点 inactivityTimeout: 2000, playbackRates: [], // 这是控制条各个组成部分，作为Player的子类 children: [ 'mediaLoader', 'posterImage', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'progressBar', 'controlBar', 'errorDisplay', 'textTrackSettings' ], language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en', languages: {}, notSupportedMessage: 'No compatible source was found for this media.' };</code></pre> <p>Player类中有个children配置项，这里面是控制条的各个组成部分的类。各个UI类还有子类，都是通过children属性链接的。</p> <h3><strong>UI与JavaScript对象的衔接</strong></h3> <p>video.js里都是组件化实现的，小到一个按钮大到一个播放器都是一个继承了Component类的对象实例，每个对象包含一个el属性，这个el对应一个DOM实例，el是通过createEl生成的DOM实例，在Component基类中包含一个方法createEl方法，子类也可以重写该方法。类与类的从属关系是通过children属性连接。</p> <p>那么整个播放器是怎么把播放器的UI加载到HTML中的呢？在Player的构造函数里可以看到先生成el，然后初始化父类遍历Children属性，将children中的类实例化并将对应的DOM嵌入到player的el属性中，最后在Player的构造函数中直接挂载到video标签的父级DOM上。</p> <pre> <code class="language-javascript">if (tag.parentNode) { tag.parentNode.insertBefore(el, tag); }</code></pre> <p>这里的tag指的是video标签。</p> <h3><strong>类的挂载方式</strong></h3> <p>上文有提到过UI的从属关系是通过类的children方法连接的，但是所有的类都是关在Component类上的。这主要是基于对模块化的考虑，通过这种方式实现了模块之间的通信。</p> <p>存储</p> <pre> <code class="language-javascript">static registerComponent(name, comp) { if (!Component.components_) { Component.components_ = {}; } Component.components_[name] = comp; return comp; }</code></pre> <p>获取</p> <pre> <code class="language-javascript">static getComponent(name) { if (Component.components_ && Component.components_[name]) { return Component.components_[name]; } if (window && window.videojs && window.videojs[name]) { log.warn(`The ${name} component was added to the videojs object when it should be registered using videojs.registerComponent(name, component)`); return window.videojs[name]; } }</code></pre> <p>在Componet里有个静态方法是registerComponet，所有的组件类都注册到Componet的components_属性里。</p> <p>例如控制条类ControlBar就是通过这个方法注册的。</p> <pre> <code class="language-javascript">Component.registerComponent('ControlBar', ControlBar);</code></pre> <p>在Player的children属性里包括了controlBar类，然后通过getComponet获取这个类。</p> <pre> <code class="language-javascript">.filter((child) => { const c = Component.getComponent(child.opts.componentClass || toTitleCase(child.name)); return c && !Tech.isTech(c); })</code></pre> <p> </p> <p>来自：https://segmentfault.com/a/1190000007131342</p> <p> </p>