关于videojs:vue3视频播放插件vue3videoplay的具体使用方法

48次阅读

共计 2480 个字符，预计需要花费 7 分钟才能阅读完成。

之前的 vue 我的项目中用到视频播放器，然而 UI 不是很难看，索性就打算写一个视频播放器插件紧随着 vue3 的公布，vue3 的生态还不是很残缺，就索性把这个视频播放器插件批改成了 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

开始应用

全局应用

import {createApp} from 'vue'
import App from './App.vue'
let app = createApp(App)

import videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入 css
app.use(videoPlay)

app.mount('#app')

组件内应用

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

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>

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.3 0-1 0.3
poster 视频封面 string – 视频第一帧

Events

vue3-video-play 反对 video 原生所有事件 video 默认事件

事件名称 阐明 回调
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

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

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

更多示例查看主页

https://xdlumia.github.io

Author

xdlumia

正文完
videojs
发表至： video.js
2021-08-23
 0
关于videojs:vue3视频播放插件vue3videoplay的具体使用方法