webpack與video.js一同使用的一些坑

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這個全局變量。所以若是直接引入也會報錯。解決方法跟上一部分「引入其餘語言翻譯」的方法同樣，在此不贅述。