Vue3视频播放器组件Vue3-video-play入门教程

Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。

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

10、hls播放支持清晰度切换

1、安装方式

（1）npm安装方式

npm i vue3-video-play --save

（2）yarn安装方式

yarn add vue3-video-play --save

2、使用方式

（1）局部使用

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

（2）全局使用

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

3、示例代码

（1）事件示例

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>

（2）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>

4、属性 Props

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

名称说明类型可选值默认值width播放器宽度string-800pxheight播放器高度string-450pxcolor播放器主色调string-#409effsrc视频资源string--title视频名称string--type视频类型string-video/mp4poster视频封面string-视频第一帧webFullScreen网页全屏boolean-falsespeed是否支持快进快退boolean-truecurrentTime跳转到固定播放时间(s)number-0playsinlineios点击屏幕是否全屏boolean-falsemuted静音boolean-falsespeedRate倍速配置array-["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"]autoPlay自动播放boolean-false,为true时会自动静音loop循环播放boolean-falsemirror镜像画面boolean-falseligthOff关灯模式boolean-falsevolume默认音量number0-10.3control是否显示控制器boolean-truecontrolBtns控制器显示的按钮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镜像翻转事件valloopChange循环播放开关事件vallightOffChange关灯模式事件valloadstart客户端开始请求数据eventprogress客户端正在请求数据eventerror请求数据时遇到错误eventstalled网速失速eventplay开始播放时触发eventpause暂停时触发eventloadedmetadata成功获取资源长度eventloadeddata缓冲中eventwaiting等待数据，并非错误eventplaying开始回放eventcanplay暂停状态下可以播放eventcanplaythrough可以持续播放eventtimeupdate更新播放时间eventended播放结束eventratechange播放速率改变eventdurationchange资源长度改变eventvolumechange音量改变event
快捷键说明
键名说明Space暂停/播放方向右键 →单次快进 10s，长按 5 倍速播放方向左键 ←快退 10s方向上键 ↑音量+10%方向下键 ↓音量-10%Esc退出全屏/退出网页全屏F全屏/退出全屏