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

文章目录

一、安装：

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

【1】安装video.js：

bash 复制代码

npm install video.js -S

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

bash 复制代码

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

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

bash 复制代码

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

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

bash 复制代码

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	视频播放错误

bash 复制代码

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

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

浏览器的自动播放机制：

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