vue3视频播放插件vue3-video-play的具体使用方法

发布于:12分钟前

之前的vue项目中用到视频播放器，但是UI不是很好看，索性就打算写一个视频播放器插件紧随着vue3的发布，vue3的生态还不是很完整，就索性把这个视频播放器插件修改成了vue3版，最终使用vite2+vue3开发

插件Github地址 vue-video-player

先看一下这个播放器(vue3-video-play)的界面吧

vue3-video-play视频播放插件基于原生的HTML5的 <video> 标签 开发，所以支持的视频格式和 <video> 一致，并且支持<video>标签的所有原生属性和方法

主页

https://xdlumia.github.io

功能一览

1. 支持快捷键操作
2. 支持倍速播放设置
3. 支持镜像画面设置
4. 支持关灯模式设置
5. 支持画中画模式播放
6. 支持全屏播放
7. 支持网页全屏播放

安装

npm安装：

npm i vue3-video-play --save 
   
   
1

yarn安装：

yarn add vue3-video-play --save 
   
   
1

开始使用

全局使用

   
   

     
     

      
      

     
     
     
     

      
      

       
       import { createApp } 
       
       from 
       
       'vue' 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       App 
       
       from 
       
       './App.vue' 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const app = 
       
       createApp(
       
       App) 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import videoPlay 
       
       from 
       
       'vue3-video-play' 
       
       // 引入组件 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       'vue3-video-play/dist/style.css' 
       
       // 引入css 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       ​​​​​​​app.
       
       use(videoPlay) app.
       
       mount(
       
       '#app') 
      
      
     
     
   
   
1

组件内使用

   
   

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       'vue3-video-play/dist/style.css'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { videoPlay } 
       
       from 
       
       'vue-video-player'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       components: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           videoPlay
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   
1

SPA 单页面使用示例

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <videoPlay 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       v-bind=
       
       "options" 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           @
       
       play=
       
       "onPlay"
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           @
       
       pause=
       
       "onPause" 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           @
       
       timeupdate=
       
       "onTimeupdate" 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           @
       
       canplay=
       
       "onCanplay" />
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script setup lang="ts">
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { reactive } 
       
       from 
       
       'vue';
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { videoPlay } 
       
       from 
       
       '../lib/index.js';
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const options = 
       
       reactive({
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       width: 
       
       '800px', 
       
       //播放器高度
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       height: 
       
       '450px', 
       
       //播放器高度
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       color: 
       
       "#409eff", 
       
       //主题色
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       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, 
       
       //是否显示控制器
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       title: 
       
       '', 
       
       //视频名称
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       src: 
       
       "http://vjs.zencdn.net/v/oceans.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>
      
      
     
     
   
   

    
    
   
   
   
   
1

Props

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

Events

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

视频没有基于任何插件,所以比较小, js和css加起来只有38kb大小,此插件会不断更新,遇到什么问题也可以在github上提issue

插件Github地址 vue-video-player 不妨点个星星