【vue】视频播放器video.js插件使用：

---

一、安装：

【video.js官网】https://videojs.com/

【1】安装video.js：

npm install video.js -S
1

【2】引入css，在mian.js中：

import "video.js/dist/video-js.css";
#注意：不要遗忘这一步，否则浏览器的样式会有问题。
1
2

【3】在页面中加入video标签：

<video class="video-js" :id="playerId"></video>
#class必须是video-js，然后需要设置一个id。
1
2

【4】最后初始化播放器：

import videojs from "video.js";

const player = videojs(playerId, {autoplay: true});
player.src(url);
player.on("ended", () => {//播放完成})
1
2
3
4
5

二、播放器配置：

【官网文档】https://videojs.com/guides/options/
在创建videojs的时候，第一个参数是对应的是播放器元素，可以是id也可以是DOM Element；第二个参数是options，即播放器的相关配置。

三、操作：

四、事件:

通过Player.on(string, EventListener)函数可以设置播放器的监听事件，第一个参数是事件名称，第二个参数是回调。

player.on("error", () => {
   const error = player.error();
   console.log("video error:" + error.code + "-" + error.message);
});
1
2
3
4

五、自动播放（需要关闭声音，否则浏览器会报错）:

浏览器的自动播放机制：
视频实际上是受音频影响，所以静音的话是可以自动播放的。目前一般有两种方式：一种就是视频不自动播放，由用户点击播放；一种就是静音自动播放，由用户自己打开声音。