vue3视频播放插件vue3-video-play的具体使用方法
Posted 一路向北qaq
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3视频播放插件vue3-video-play的具体使用方法相关的知识,希望对你有一定的参考价值。
发布于:12分钟前
之前的vue项目中用到视频播放器,但是UI不是很好看,索性就打算写一个视频播放器插件紧随着vue3的发布,vue3的生态还不是很完整,就索性把这个视频播放器插件修改成了vue3版,最终使用vite2+vue3开发
先看一下这个播放器(vue3-video-play)的界面吧
vue3-video-play视频播放插件基于原生的html5的 <video>
标签 开发,所以支持的视频格式和 <video>
一致,并且支持<video>
标签的所有原生属性和方法
主页
功能一览
- 支持快捷键操作
- 支持倍速播放设置
- 支持镜像画面设置
- 支持关灯模式设置
- 支持画中画模式播放
- 支持全屏播放
- 支持网页全屏播放
安装
npm安装:
npm i vue3-video-play --save
yarn安装:
yarn add vue3-video-play --save
开始使用
-
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')
-
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 不妨点个星星
vue video谷歌浏览器播放异常
参考技术A 更换成videojs插件。一直提示无法找到视频文件正确路径,无法播放。原因在于视频播放需要在DOM加载完毕,并且获取到后端返回的视频播放地址之后才可以正确播放。
video,英语单词,主要用作名词、形容词、动词,作名词时意为视频,录像,录像机,电视。作形容词时意为视频的,录像的,电视的,作动词时意为录制。
以上是关于vue3视频播放插件vue3-video-play的具体使用方法的主要内容,如果未能解决你的问题,请参考以下文章
web前端培训分享:使用Dplayer实现Vue3中的视频及弹幕播放