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

Posted 一路向北qaq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 
   

yarn安装:

yarn add vue3-video-play --save 
   

开始使用

全局使用


   
  1. import createApp from 'vue'
  2. import App from './App.vue'
  3. const app = createApp( App)
  4. import videoPlay from 'vue3-video-play' // 引入组件
  5. import 'vue3-video-play/dist/style.css' // 引入css
  6. ​​​​​​​app. use(videoPlay) app. mount( '#app')

组件内使用


   
  1. import 'vue3-video-play/dist/style.css'
  2. import videoPlay from 'vue-video-player'
  3. export default
  4. components:
  5. videoPlay

SPA 单页面使用示例


   
  1. <template>
  2. <div>
  3. <videoPlay
  4. v-bind= "options"
  5. @ play= "onPlay"
  6. @ pause= "onPause"
  7. @ timeupdate= "onTimeupdate"
  8. @ canplay= "onCanplay" />
  9. </div>
  10. </template>
  11. <script setup lang="ts">
  12. import reactive from 'vue';
  13. import videoPlay from '../lib/index.js';
  14. const options = reactive(
  15. width: '800px', //播放器高度
  16. height: '450px', //播放器高度
  17. color: "#409eff", //主题色
  18. muted: false, //静音
  19. webFullScreen: false,
  20. speedRate: [ "0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  21. autoPlay: false, //自动播放
  22. loop: false, //循环播放
  23. mirror: false, //镜像画面
  24. ligthOff: false, //关灯模式
  25. volume: 0.3, //默认音量大小
  26. control: true, //是否显示控制器
  27. title: '', //视频名称
  28. src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源
  29. poster: '', //封面
  30. )
  31. const onPlay = ( ev) =>
  32. console. log( '播放')
  33. const onPause = ( ev) =>
  34. console. log(ev, '暂停')
  35. const onTimeupdate = ( ev) =>
  36. console. log(ev, '时间更新')
  37. const onCanplay = ( ev) =>
  38. console. log(ev, '可以播放')
  39. </script>
  40. <style scoped>
  41. </style>

Props

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

名称说明类型可选值默认值
width播放器宽度string-800px
height播放器高度string-450px
title视频名称string--
src视频资源string--
color播放器主色调string-#409eff
webFullScreen网页全屏boolean-false
speedRate倍速配置array-[“0.75”, “1.0”, “1.25”, “1.5”, “2.0”]
mirror镜像画面boolean-false
ligthOff关灯模式boolean-false
muted静音boolean-false
autoPlay自动播放boolean-false,为true时会自动静音
loop循环播放boolean-false
volume默认音量0.30-10.3
poster视频封面string-视频第一帧

Events

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

事件名称说明回调
loadstart客户端开始请求数据event
progress客户端正在请求数据event
error请求数据时遇到错误event
stalled网速失速event
play开始播放时触发event
pause暂停时触发event
loadedmetadata成功获取资源长度event
loadeddataevent
waiting等待数据,并非错误event
playing开始回放event
canplay暂停状态下可以播放event
canplaythrough可以持续播放event
timeupdate更新播放时间event
ended播放结束event
ratechange播放速率改变event
durationchange资源长度改变event
volumechange音量改变event

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

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

vue video谷歌浏览器播放异常

参考技术A 更换成videojs插件。
一直提示无法找到视频文件正确路径,无法播放。原因在于视频播放需要在DOM加载完毕,并且获取到后端返回的视频播放地址之后才可以正确播放。
video,英语单词,主要用作名词、形容词、动词,作名词时意为视频,录像,录像机,电视。作形容词时意为视频的,录像的,电视的,作动词时意为录制。

以上是关于vue3视频播放插件vue3-video-play的具体使用方法的主要内容,如果未能解决你的问题,请参考以下文章

支持vue3.0 中的音频插件都有哪些?

web前端培训分享:使用Dplayer实现Vue3中的视频及弹幕播放

在小程序中使用腾讯视频插件播放教程视频

flask插件 不了视频。打开视频,视频播放框没反应请高手赐教

Android 视频播放器插件 - MXVideo

WEB视频播放器插件,总结