手把手教你如何编译打包video.js

手把手教你如何编译打包video.js

简介

video.js是一个流行的HTML5视频播放器，具有自适应布局和全屏功能，同时支持多平台和浏览器。它的源代码托管在GitHub上，可以自定义并打包编译生成适合自己网站需要的视频播放器。本攻略将介绍如何编译打包video.js。

步骤

1. 准备工作

在开始编译打包之前，需要先安装Node.js和npm，并确保已经安装了git。在终端窗口中输入以下命令进行验证：

node -v
npm -v
git --version

2. 获取源代码

使用git获取video.js源代码：

git clone https://github.com/videojs/video.js.git
cd video.js

3. 安装依赖

在终端窗口中输入以下命令安装video.js的依赖项：

npm install

4. 编译并打包

在终端窗口中输入以下命令编译生成video.js：

npm run build

此步骤将会在目录下生成一个dist文件夹，里面包含了编译之后的视频播放器。

5. 自定义编译

如果需要自定义编译，可以修改package.json文件中的videojs-customize命令。比如，修改以下内容：

"videojs-customize": "node ./node_modules/.bin/videojs-generate-plugin -s src/js/ -n CustomVideoJS -f dist/custom.videojs.js -v 'window.videojs' --no-css -x video.js"

• -s 参数用于指定源代码目录，默认为./src/
• -n 参数用于指定自定义视频播放器的名称，默认为VideoJS。
• -f 参数用于指定编译之后的输出文件，默认为./dist/video.js。
• -v 参数用于指定视频播放器的全局变量，默认为global.videojs。
• --no-css 参数用于禁用CSS编译。
• -x 参数用于指定需要排除的模块。

示例 1：自定义编译一个自己的视频播放器

修改package.json文件中的videojs-customize命令：

"videojs-customize": "node ./node_modules/.bin/videojs-generate-plugin -s src/js/ -n MyVideoPlayer -f dist/my.video.player.js -v 'window.videojs' --no-css -x big-play-button,clickable-component,component,player-utils,utils,video.js"

此步骤将会在目录下生成一个dist文件夹，里面包含了自定义编译之后的视频播放器。

示例 2：修改默认的皮肤

默认情况下，video.js使用的皮肤是video-js.css，可以在src/css/目录下找到。可以通过修改使用npm run sass命令编译CSS文件来自定义自己的皮肤。比如，修改src/css/controls.less文件来修改默认皮肤中控制条的颜色：

...
 ControlBar {
    height: 4.5em;
    min-height: 4.5em;

    .vjs-icon-button {
      color: #fff;
      &:hover, &:focus {
        color: #ff0;
      }
    }
  }
...

然后在终端窗口中输入以下命令编译CSS文件：

npm run sass

此步骤将会在dist文件夹中生成编译后的CSS文件。

结论

以上就是手把手教你如何编译打包video.js的完整攻略。因为video.js非常灵活，可以根据自己的需求进行自定义编译，因此可以定制出适合自己网站需要的视频播放器。