发布于:2021-08-23
之前的vue项目中用到视频播放器，但是UI不是很好看，索性就打算写一个视频播放器插件紧随着vue3的发布，vue3的生态还不是很完整，就索性把这个视频播放器插件修改成了vue3版，最终使用vite2+vue3开发
插件Github地址 vue-video-player
hls.js player component for Vue3.
适用于 Vue3 的 hls.js 播放器组件。
先看一下这个播放器(vue3-video-play)的界面吧
vue3-video-play视频播放插件基于原生的HTML5的 <video> 标签 开发，所以支持的视频格式和 <video> 一致，并且支持<video>标签的所有原生属性和方法
必须使用 vue@3.2.4及以上版本
支持快捷键操作
支持倍速播放设置
支持镜像画面设置
支持关灯模式设置
支持画中画模式播放
支持全屏/网页全屏播放
支持从固定时间开始播放
支持移动端，移动端会自动调用自带视频播放器
支持hls视频流播放，支持直播
hls播放支持清晰度切换
新增: 支持hls视频流播放
新增: 新增画质切换，需视频流支持
新增: 新增画音视切换，需视频流支持
新增: props参数增加currentTime属性，可跳转到固定时间播放
新增: props参数增加type属性，视频格式
新增: 右键菜单功能，右键菜单包涵，视频滤镜调节、快捷键说明、复制当前视频网址
新增: mirrorChange loopChange lightOffChange 事件
新增: 增加空格快捷键 播放/暂停 的操作
优化: 如果音量为 0 关闭静音按钮 音量设置为 5
npm安装：
npm i vue3-video-play --save
yarn安装：
yarn add vue3-video-play --save
import{ createApp }from'vue'importAppfrom'./App.vue'letapp = createApp(App)importvue3videoPlayfrom'vue3-video-play'// 引入组件import'vue3-video-play/dist/style.css'// 引入cssapp.use(vue3videoPlay)app.mount('#app')
// require styleimport'vue3-video-play/dist/style.css'import{ videoPlay }from'vue-video-play'exportdefault{components: { videoPlay }}
提供了丰富了配置功能
:::demo 自定义配置 比如自定义poster。
<template>
<div>
<vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
width: '800px', //播放器高度
height: '450px', //播放器高度
color: "#409eff", //主题色
title: '', //视频名称
src: "https://go.dreamwq.com/videos/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秒开始播放
<template>
<div>
<vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.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://go.dreamwq.com/videos/IronMan.mp4", //视频源
})
</script>
<style scoped>
</style>
:::
还可以通过props的control属性 来控制是否显示控制器
:::demo 通过control 来控制是否显示控制器
<template>
<div>
<vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.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://go.dreamwq.com/videos/IronMan.mp4", //视频源
})
</script>
<style scoped>
</style>
:::
:::demo vue3-video-play 支持原生video所有事件。
<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://go.dreamwq.com/videos/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>
:::
:::demo vue3-video-play 支持m3u8(hls)播放
<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>
:::
vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和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.30-10.3
poster视频封面string-视频第一帧
vue3-video-play支持video原生所有事件 video默认事件
事件名称说明回调
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全屏/退出全屏
