Vue3VideoPlay

VersionDownloadsGitHub starsGitHub issuesGitHub forksGitHub last commitlicense

NPM

必须使用 vue@3.2.2及以上版本

Vue3-video-play

适用于 Vue3 的 hls.js 播放器组件 | 并且支持 MP4/WebM/Ogg 格式 配置强大，UI 还算好看

功能一览

  1. 支持快捷键操作
  2. 支持倍速播放设置
  3. 支持镜像画面设置
  4. 支持关灯模式设置
  5. 支持画中画模式播放
  6. 支持全屏/网页全屏播放
  7. 支持从固定时间开始播放
  8. 支持移动端，移动端会自动调用自带视频播放器
  9. 支持hls视频流播放，支持直播
  10. hls播放支持清晰度切换

主页示例

https://codelife.cc/vue3-video-play/

近期更新 v1.3.1-beta.2 🎉

  • 新增: 支持hls视频流播放
  • 新增: 新增画质切换，需视频流支持
  • 新增: 新增画音视切换，需视频流支持
  • 新增: props参数增加currentTime属性，可跳转到固定时间播放
  • 新增: props参数增加type属性，视频格式
  • 新增: props参数增加controlBtns属性，自定义控制器按钮显示
  • 新增: 右键菜单功能，右键菜单包涵，视频滤镜调节、快捷键说明、复制当前视频网址
  • 新增: mirrorChange loopChange lightOffChange 事件
  • 新增: 增加空格快捷键 播放/暂停 的操作
  • 优化: 如果音量为 0 关闭静音按钮 音量设置为 5

使用指南

安装

npm安装：

npm i vue3-video-play --save

yarn安装：

yarn add vue3-video-play --save

开始使用

全局使用

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')

组件内使用

// require style
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-play'
export default {
  components: {
    videoPlay
  }
}

基本示例

提供了丰富了配置功能

自定义配置 比如自定义poster。
<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, //是否显示控制
  controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})
</script>

<style scoped>
</style>

可以通过props的speed开启或关闭进度条功能, 并且通过 currentTime属性控制从60秒开始播放

通过speed关闭进度条拖动功能。 并且通过 currentTime属性控制从60秒开始播放
<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属性 来控制是否显示控制器

通过control 来控制是否显示控制器
<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>

事件示例

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://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视频/直播

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>

Props

vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致

名称说明类型可选值默认值
width播放器宽度string-800px
height播放器高度string-450px
color播放器主色调string-#409eff
src视频资源string--
title视频名称string--
type视频类型string-video/mp4
poster视频封面string-视频第一帧
webFullScreen网页全屏boolean-false
speed是否支持快进快退boolean-true
currentTime跳转到固定播放时间(s)number-0
playsinlineios点击屏幕是否全屏boolean-false
muted静音boolean-false
speedRate倍速配置array-["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"]
autoPlay自动播放boolean-false,为true时会自动静音
loop循环播放boolean-false
mirror镜像画面boolean-false
ligthOff关灯模式boolean-false
volume默认音量number0-10.3
control是否显示控制器boolean-true
controlBtns控制器显示的按钮array['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']
preload预加载stringmeta/auto/noneauto

props属性 controlBtns 按钮说明

名称说明
audioTrack音轨切换按钮
quality视频质量切换按钮
speedRate速率切换按钮
volume音量
setting设置
pip画中画按钮
pageFullScreen网页全屏按钮
fullScreen全屏按钮

Events

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全屏/退出全屏

Author

xdlumia

点个start

vue3-video-play