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

浅浅的花香味﹌ 2023-09-29 22:31 19阅读 0赞

![e1713e68065a4ca2913336934d883726.png][]

> Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。
> 
> 1、支持快捷键操作  
> 2、支持倍速播放设置  
> 3、支持镜像画面设置  
> 4、支持关灯模式设置  
> 5、支持画中画模式播放  
> 6、支持全屏/网页全屏播放  
> 7、支持从固定时间开始播放  
> 8、支持移动端，移动端会自动调用自带视频播放器  
> 9、支持hls视频流播放，支持直播
> 
> 10、hls播放支持清晰度切换

**目录**

1、安装方式

（1）npm安装方式

（2）yarn安装方式

2、使用方式

（1）局部使用

（2）全局使用

3、示例代码

（1）事件示例

（2）Hls m3u8视频/直播

4、属性 Props

--------------------

## 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属性使用一致

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

**`props`属性 `controlBtns` 按钮说明**

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>audioTrack</td> 
   <td>音轨切换按钮</td> 
  </tr> 
  <tr> 
   <td>quality</td> 
   <td>视频质量切换按钮</td> 
  </tr> 
  <tr> 
   <td>speedRate</td> 
   <td>速率切换按钮</td> 
  </tr> 
  <tr> 
   <td>volume</td> 
   <td>音量</td> 
  </tr> 
  <tr> 
   <td>setting</td> 
   <td>设置</td> 
  </tr> 
  <tr> 
   <td>pip</td> 
   <td>画中画按钮</td> 
  </tr> 
  <tr> 
   <td>pageFullScreen</td> 
   <td>网页全屏按钮</td> 
  </tr> 
  <tr> 
   <td>fullScreen</td> 
   <td>全屏按钮</td> 
  </tr> 
 </tbody> 
</table>

**Events**

vue3-video-play支持video原生所有事件 [video默认事件][video]

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mirrorChange</td> 
   <td>镜像翻转事件</td> 
   <td>val</td> 
  </tr> 
  <tr> 
   <td>loopChange</td> 
   <td>循环播放开关事件</td> 
   <td>val</td> 
  </tr> 
  <tr> 
   <td>lightOffChange</td> 
   <td>关灯模式事件</td> 
   <td>val</td> 
  </tr> 
  <tr> 
   <td>loadstart</td> 
   <td>客户端开始请求数据</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>progress</td> 
   <td>客户端正在请求数据</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>请求数据时遇到错误</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>stalled</td> 
   <td>网速失速</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>play</td> 
   <td>开始播放时触发</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>暂停时触发</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>loadedmetadata</td> 
   <td>成功获取资源长度</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>loadeddata</td> 
   <td>缓冲中</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>waiting</td> 
   <td>等待数据，并非错误</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>playing</td> 
   <td>开始回放</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>canplay</td> 
   <td>暂停状态下可以播放</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>canplaythrough</td> 
   <td>可以持续播放</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>timeupdate</td> 
   <td>更新播放时间</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>ended</td> 
   <td>播放结束</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>ratechange</td> 
   <td>播放速率改变</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>durationchange</td> 
   <td>资源长度改变</td> 
   <td>event</td> 
  </tr> 
  <tr> 
   <td>volumechange</td> 
   <td>音量改变</td> 
   <td>event</td> 
  </tr> 
 </tbody> 
</table>

**快捷键说明**

<table> 
 <thead> 
  <tr> 
   <th>键名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Space</td> 
   <td>暂停/播放</td> 
  </tr> 
  <tr> 
   <td>方向右键 →</td> 
   <td>单次快进 10s，长按 5 倍速播放</td> 
  </tr> 
  <tr> 
   <td>方向左键 ←</td> 
   <td>快退 10s</td> 
  </tr> 
  <tr> 
   <td>方向上键 ↑</td> 
   <td>音量+10%</td> 
  </tr> 
  <tr> 
   <td>方向下键 ↓</td> 
   <td>音量-10%</td> 
  </tr> 
  <tr> 
   <td>Esc</td> 
   <td>退出全屏/退出网页全屏</td> 
  </tr> 
  <tr> 
   <td>F</td> 
   <td>全屏/退出全屏</td> 
  </tr> 
 </tbody> 
</table>

[e1713e68065a4ca2913336934d883726.png]: https://img-blog.csdnimg.cn/e1713e68065a4ca2913336934d883726.png
[video]: https://segmentfault.com/a/1190000008053507