文章目录
- 一、安装：
- 【1】安装video.js：
- 【2】引入css，在mian.js中：
- 【3】在页面中加入video标签：
- 【4】最后初始化播放器：
- 二、播放器配置：
- 三、操作：
- 四、事件:
- 五、自动播放（需要关闭声音，否则浏览器会报错）:
一、安装：
【video.js官网】https://videojs.com/
【1】安装video.js：
npm install video.js -S
【2】引入css，在mian.js中：
import "video.js/dist/video-js.css";
#注意：不要遗忘这一步，否则浏览器的样式会有问题。
【3】在页面中加入video标签：
<video class="video-js" :id="playerId"></video>
#class必须是video-js，然后需要设置一个id。
【4】最后初始化播放器：
import videojs from "video.js";
const player = videojs(playerId, {autoplay: true});
player.src(url);
player.on("ended", () => {//播放完成})
二、播放器配置：
【官网文档】https://videojs.com/guides/options/
在创建videojs的时候，第一个参数是对应的是播放器元素，可以是id也可以是DOM Element；第二个参数是options，即播放器的相关配置。
| 配置 | 描述 |
|---|---|
| autoplay | 自动播放，它有五个选项，可以是boolean也可以是字符串：1. false：不自动播放；2. true：自动播放，但是如果浏览器不允许自动播放的话就会失效；3. “muted”：静音后自动播放。因为浏览器实际上是不允许自动播放声音，所以静音后自动播放基本不会失效，但是没有声音需要自己处理一下；4. “play”：自动播放，与true效果一样；5. “any”：自动播放，如果浏览器阻止的话会先静音再自动播放 |
| src | 视频源 |
| width/height | 视频宽高，number类型 |
| muted | 是否静音 |
| loop | 是否循环播放 |
| playsinline | 是否内联播放。用于移动端（尤其iOS），在部分移动端浏览器上如果通过video标签进行视频播放，那么浏览器会进行劫持并通过一个最上层的播放组件来进行全屏播放。设置playsinline后会禁止这一行为，在原video标签内进行视频播放。不过由于Android系统的碎片化，在部分厂商自带的浏览器上会没有效果 |
| controls | 是否显示控制组件（包括控制栏和大播放按钮等）。如果是true即显示，同时支持一些用户操作，比如单击视频暂停/播放，双击全屏等。如果是false则不显示，同时也禁止了用户操作，这样我们需要自己实现控制 |
| controlBar | 设置控制栏的内容，是一个Object（ControlBarOptions）或者是布尔值。如果是true则显示默认控制栏，否则不显示。如果是Object则可以对控制栏中的按钮进行设置，这里就说说默认显示的几个属性：1. playToggle：是否显示播放按钮；2. progressControl：是否显示进度条。除了boolean，还可以设置一个ProgressControlOptions对象，更详细的配置进度条；3. volumePanel：是否显示音量。除了boolean，还可以设置一个VolumePanelOptions对象，更详细的配置音量组件；4. pictureInPictureToggle：是否显示画中画按钮；5. remainingTimeDisplay：是否显示时长；6. fullscreenToggle：是否显示全屏按钮；controlBar的前提是controls为true，否则如何设置都不会显示 |
| bigPlayButton | 在视频上显示大播放按钮。这样同样需要controls为true，否则设置为true也不会显示 |
| userActions | 用户操作，也是一个Object（UserActions），有三个属性：1. click： 是否允许单击；2. doubleClick：是否允许双击；3. hotkeys：是否允许快捷键，也是一个Object，包括全屏、静音和播放/暂停。上面提到如果controls为true则同时支持用户操作，如果想显示控制栏又不允许这些用户操作，则可以设置userActions禁止这些操作即可，这样用户就只能通过点击控制栏上的按钮来控制 |
三、操作：
| 操作 | 描述 |
|---|---|
| src(string | SourceObject |
| src():string | 获取当前视频源 |
| play() | 播放 |
| pause() | 暂停 |
| paused():boolean | 是否暂停 |
| currentTime(number) | 设置播放位置，就是seek |
| currentTime():number | 获取当前播放位置 |
| muted():boolean | 是否静音 |
| muted(boolean) | 设置静音 |
| duration():number | 获取时长 |
| controls(boolean) | 设置控制栏显示隐藏 |
| controls():boolean | 控制栏是否显示 |
| requestFullscreen() | 全屏播放 |
| exitFullscreen() | 退出全屏播放 |
| isFullscreen():boolean | 是否全屏播放 |
| dispose() | 销毁播放器 |
| error(MediaError) | 设置一个错误 |
| error():MediaError | 获取当前错误。配合error事件 |
四、事件:
通过Player.on(string, EventListener)函数可以设置播放器的监听事件，第一个参数是事件名称，第二个参数是回调。
| 事件 | 描述 |
|---|---|
| canplay | 视频可以播放 |
| playing | 播放 |
| pause | 暂停 |
| timeupdate | 播放进度更新 |
| ended | 播放完成 |
| fullscreenchange | 全屏状态改变 |
| error | 视频播放错误 |
player.on("error", () => {
const error = player.error();
console.log("video error:" + error.code + "-" + error.message);
});
五、自动播放（需要关闭声音，否则浏览器会报错）:
浏览器的自动播放机制：
视频实际上是受音频影响，所以静音的话是可以自动播放的。目前一般有两种方式：一种就是视频不自动播放，由用户点击播放；一种就是静音自动播放，由用户自己打开声音。
