vue3视频播放插件vue3-video-play的具体使用方法,同时支持PC和移动端
> 之前的vue项目中用到视频播放器，但是UI不是很好看，索性就打算写一个视频播放器插件紧随着vue3的发布，vue3的生态还不是很完整，就索性把这个视频播放器插件修改成了vue3版，最终使用vite2+vue3开发
插件Github地址 [vue-video-player](https://github.com/xdlumia/vue3-video-play)
hls.js player component for Vue3.
适用于 Vue3 的 hls.js 播放器组件。
#### 先看一下这个播放器(vue3-video-play)的界面吧
**vue3-video-play视频播放插件基于原生的`HTML5的 <video>` 标签 开发，所以支持的视频格式和 `<video>` 一致，并且支持`<video>`标签的所有原生属性和方法**
<span style="color:#cb3837"> **必须使用 vue@3.2.4及以上版本**</span>
## 功能一览
1. 支持快捷键操作
2. 支持倍速播放设置
3. 支持镜像画面设置
4. 支持关灯模式设置
5. 支持画中画模式播放
6. 支持全屏/网页全屏播放
6. 支持从固定时间开始播放
8. 支持移动端，移动端会自动调用自带视频播放器
9. 支持hls视频流播放，支持直播
10. hls播放支持清晰度切换
# 主页示例
[https://codelife.cc/vue3-video-play/](https://codelife.cc/vue3-video-play/)
## 近期更新 v1.3.1-beta.2 🎉
- 新增: 支持hls视频流播放
- 新增: 新增画质切换，需视频流支持
- 新增: 新增画音视切换，需视频流支持
- 新增: props参数增加`currentTime`属性，可跳转到固定时间播放
- 新增: props参数增加`type`属性，视频格式
- 新增: props参数增加`controlBtns`属性，自定义控制器按钮显示
- 新增: 右键菜单功能，右键菜单包涵，视频滤镜调节、快捷键说明、复制当前视频网址
- 新增: `mirrorChange` `loopChange` `lightOffChange` 事件
- 新增: 增加空格快捷键 `播放/暂停` 的操作
- 优化: 如果音量为 0 关闭静音按钮 音量设置为 5
## 安装
npm安装：
``` bash
npm i vue3-video-play --save
```
yarn安装：
``` bash
yarn add vue3-video-play --save
```
## 开始使用
#### 全局使用
``` js
import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)
app.mount('#app')
```
#### 组件内使用
```js
// require style
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-play'
export default {
components: {
videoPlay
}
}
```
## 基本示例
提供了丰富了配置功能
:::demo 自定义配置 比如自定义poster。
```html
<template>
<div>
<vue3VideoPlay v-bind="options" poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg'/>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
width: '800px', //播放器高度
height: '450px', //播放器高度
color: "#409eff", //主题色
title: '', //视频名称
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
muted: false, //静音
webFullScreen: false,
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
autoPlay: false, //自动播放
loop: false, //循环播放
mirror: false, //镜像画面
ligthOff: false, //关灯模式
volume: 0.3, //默认音量大小
control: true, //是否显示控制器
})
</script>
<style scoped>
</style>
```
:::
可以通过`props`的`speed`开启或关闭进度条功能, 并且通过 `currentTime`属性控制从60秒开始播放
:::demo 通过`speed`关闭进度条拖动功能。 并且通过 `currentTime`属性控制从60秒开始播放
```html
<template>
<div>
<vue3VideoPlay v-bind="options" poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg'/>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
width: '500px', //播放器高度
height: '260px', //播放器高度
color: "#409eff", //主题色
currentTime:60,
speed:false, //关闭进度条拖动
title: '', //视频名称
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
})
</script>
<style scoped>
</style>
```
:::
还可以通过`props`的`control`属性 来控制是否显示控制器
:::demo 通过`control` 来控制是否显示控制器
```html
<template>
<div>
<vue3VideoPlay v-bind="options" poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg'/>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
width: '500px', //播放器高度
height: '260px', //播放器高度
color: "#409eff", //主题色
control: false, //是否显示控制器
title: '', //视频名称
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
})
</script>
<style scoped>
</style>
```
:::
## 事件示例
:::demo `vue3-video-play` 支持原生`video`所有事件。
```html
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@play="onPlay"
@pause="onPause"
@timeupdate="onTimeupdate"
@canplay="onCanplay" />
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
poster: '', //封面
})
const onPlay = (ev) => {
console.log('播放')
}
const onPause = (ev) => {
console.log(ev, '暂停')
}
const onTimeupdate = (ev) => {
console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
console.log(ev, '可以播放')
}
</script>
<style scoped>
</style>
```
:::
## Hls m3u8视频/直播
:::demo `vue3-video-play` 支持m3u8(hls)播放
```html
<template>
<div>
<vue3VideoPlay
width="800px"
title="冰河世纪"
:src="options.src"
:type="options.type"
:autoPlay="false"
/>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
type: 'm3u8', //视频类型
})
</script>
<style scoped>
</style>
```
:::
## Props
vue3-video-play 支持video原生所有Attributes [video原生属性](https://segmentfault.com/a/1190000008053507) 使用方式和props属性使用一致
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | :--------------: | :-----: | :----: | :------------------------------------------: |
| width | 播放器宽度 | string | - | 800px |
| height | 播放器高度 | string | - | 450px |
| title | 视频名称 | string | - | - |
| src | 视频资源 | string | - | - |
| type | 视频类型 | string | - | video/mp4 |
| color | 播放器主色调 | string | - | #409eff |
| webFullScreen | 网页全屏 | boolean | - | false |
| speed | 是否支持快进快退 | boolean | - | true |
| currentTime | 跳转到固定播放时间(s) | number | - | 0 |
| speedRate | 倍速配置 | array | - | ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"] |
| mirror | 镜像画面 | boolean | - | false |
| ligthOff | 关灯模式 | boolean | - | false |
| muted | 静音 | boolean | - | false |
| autoPlay | 自动播放 | boolean | - | false,为true时会自动静音 |
| loop | 循环播放 | boolean | - | false |
| volume | 默认音量 | 0.3 | 0-1 | 0.3 |
| poster | 视频封面 | string | - | 视频第一帧 |
## Events
vue3-video-play支持video原生所有事件 [video默认事件](https://segmentfault.com/a/1190000008053507)
| 事件名称 | 说明 | 回调 |
| -------------- | ------------------ | ----- |
| mirrorChange | 镜像翻转事件 | val |
| loopChange | 循环播放开关事件 | val |
| lightOffChange | 关灯模式事件 | val |
| loadstart | 客户端开始请求数据 | event |
| progress | 客户端正在请求数据 | event |
| error | 请求数据时遇到错误 | event |
| stalled | 网速失速 | event |
| play | 开始播放时触发 | event |
| pause | 暂停时触发 | event |
| loadedmetadata | 成功获取资源长度 | event |
| loadeddata | 缓冲中 | event |
| waiting | 等待数据，并非错误 | event |
| playing | 开始回放 | event |
| canplay | 暂停状态下可以播放 | event |
| canplaythrough | 可以持续播放 | event |
| timeupdate | 更新播放时间 | event |
| ended | 播放结束 | event |
| ratechange | 播放速率改变 | event |
| durationchange | 资源长度改变 | event |
| volumechange | 音量改变 | event |
## 快捷键说明
支持快捷键操作
| 键名 | 说明 |
| ---------- | ----------------------------- |
| Space | 暂停/播放 |
| 方向右键 → | 单次快进 10s，长按 5 倍速播放 |
| 方向左键 ← | 快退 10s |
| 方向上键 ↑ | 音量+10% |
| 方向下键 ↓ | 音量-10% |
| Esc | 退出全屏/退出网页全屏 |
| F | 全屏/退出全屏 |
# Author
[xdlumia](https://codelife.cc)
# 点个start
[vue3-video-play](https://github.com/xdlumia/vue3-video-play)
