Video.js 技术文档

1. 安装指南

1.1 通过 CDN 安装

Video.js 可以通过 CDN 快速引入到你的项目中。以下是使用 CDN 的示例：

<link href="//vjs.zencdn.net/8.17.3/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.17.3/video.min.js"></script>

1.2 通过 npm 安装

你也可以通过 npm 安装 Video.js：

npm install video.js

安装完成后，可以在项目中引入：

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

1.3 通过 GitHub 下载

你还可以从 GitHub 下载 Video.js 的发布版本，并将其手动添加到项目中。

2. 项目的使用说明

2.1 基本使用

在 HTML 中添加一个 <video> 元素，并使用 data-setup 属性进行自动初始化：

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    要查看此视频，请启用 JavaScript，并考虑升级到支持 HTML5 视频的浏览器。
  </p>
</video>

2.2 手动初始化

如果你不想使用自动初始化，可以手动初始化 Video.js：

var player = videojs('my-player');

2.3 自定义选项

你可以在初始化时传入选项对象，并在播放器准备好后执行回调函数：

var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('你的播放器已准备就绪！');

  // 在此上下文中，`this` 是 Video.js 创建的播放器。
  this.play();

  // 添加事件监听器
  this.on('ended', function() {
    videojs.log('哎呀...这么快就结束了？！');
  });
});

3. 项目 API 使用文档

3.1 播放器实例

通过 videojs 函数创建的播放器实例提供了丰富的 API 方法和事件。

3.1.1 播放视频

player.play();

3.1.2 暂停视频

player.pause();

3.1.3 获取当前时间

var currentTime = player.currentTime();

3.1.4 设置当前时间

player.currentTime(120); // 设置为 120 秒

3.1.5 监听事件

player.on('play', function() {
  videojs.log('视频开始播放');
});

3.2 插件

Video.js 支持通过插件扩展功能。你可以通过 videojs.registerPlugin 注册自定义插件：

videojs.registerPlugin('myPlugin', function(options) {
  // 插件逻辑
});

player.myPlugin(options);

4. 项目安装方式

4.1 通过 CDN 安装

<link href="//vjs.zencdn.net/8.17.3/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.17.3/video.min.js"></script>

4.2 通过 npm 安装

npm install video.js

4.3 通过 GitHub 下载

从 GitHub 下载 Video.js 的发布版本，并手动添加到项目中。

通过以上步骤，你可以轻松地在项目中集成和使用 Video.js，享受其强大的功能和灵活的扩展性。