video.js是一个优异的视频播放器库，不过官网的示例中，是作为全局变量videojs引入的。假如我们的项目运用ES6作风的模块，用webpack来做打包的话，就须要做一些分外的事情。本文引见我在运用的时刻碰到的一些“坑”。

基础运用要领

直接从npm装置video.js，然后就能够在代码中运用video.js了。

npm install video.js --save

import videojs from 'video.js';

videojs(document.getElementById('foo'));

引入默许皮肤款式

然则如许运用并没有引入video.js的皮肤款式文件，播放器是没有界面的。

所以还须要引入CSS文件：

import 'video.js/dist/video-js.css';

别的须要注重的是，由于CSS中运用了图标字体，还须要用webpack的file-loader处置惩罚字体文件。在webpack设置文件中增添如许的loader设置：

{
  test: /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
  loader: 'file',
}

引入Flash播放器的SWF文件

关于一些HTML5播放器播放不了的花样，video.js回挪用Flash播放器去播放器，如许就须要引入一个SWF文件。要领照样用file-loader。在之前的设置中加上swf扩展名：

{
  test: /\.(swf|ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
  loader: 'file',
}

然后在代码中设置SWF文件的途径：

import SWF_PATH from 'video.js/dist/video-js.swf';

videojs.options.flash.swf = SWF_PATH;

引入vtt.js

假如运用Flash播放器，video.js还会异步要求一个vtt.js文件。这个是用来处置惩罚WebVTT文件的。

这个JS文件的途径的设置要领跟上面的SWF文件的设置要领是相似的。然则，webpack默许会对JS文件打包，而我们须要的是经由过程file-loader来引入这个JS文件，从而取得其形对途径，所以要在import语句中指定详细的loader：

import VTTJS_PATH from 'file!videojs-vtt.js/dist/vtt.min.js';

videojs.options['vtt.js'] = VTTJS_PATH;

引入其他言语翻译

video.js包括了许多种言语的本地化，然则没有包括在库中，须要我们本身加载：

import 'video.js/dist/lang/zh-CN';

如许加载的题目是，本地化JS代码中运用了videojs这个全局变量，然则webpack并没有将其暴露，所以运转会报错。

处理这个题目有两种要领，在webpack的文档有所说起。

第一种要领是运用imports-loader，在import一个JS的时刻，注入一个全局变量：

import 'imports?videojs=video.js!video.js/dist/lang/zh-CN'

如许的语句，就是通知webpack，将videojs这个全局变量指向video.js这个模块。如许就不会报错。

第二种要领是运用ProvidePlugin，直接把全局变量暴露出来。

在webpack的设置文件中，增添如许的plugin设置：

new webpack.ProvidePlugin({
  videojs: 'video.js',
}),

如许就示意把video.js模块暴露为全局变量videojs。

运用插件

video.js有许多插件，他们平常也会运用videojs这个全局变量。因而假如直接引入也会报错。处理要领跟上一部分“引入其他言语翻译”的要领一样，在此不赘述。