vue3视频播放插件
1、效果图(网上随便找的视频用来测试的,所以有个水印)
2、引入插件
npm 安装:npm i vue3-video-play --save
yarn 安装:yarn add vue3-video-play --save
3、项目中引入
全局引入方式:在main.js中引入以下
import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css
app.use(vue3videoPlay);
组件内引入方式:
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue-video-play";
components: { videoPlay },
4、使用及例子(因为我用的全局引入)
<template><div class="about"><vue3VideoPlayv-bind="options"poster="https://xxxxx.jpg" // 视频封面地址/></div>
</template>
<script setup>
import { reactive } from "vue";const options = reactive({width: "100%", //播放器宽度 也可以使用pxheight: "100%", //播放器高度 同理可以使用pxcolor: "#409eff", //主题色title: "", //视频名称src: "https://xxxxx.mp4", //视频源muted: false, //静音webFullScreen: false,speedRate: ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速autoPlay: false, //自动播放loop: false, //循环播放mirror: false, //镜像画面ligthOff: false, //关灯模式volume: 0.3, //默认音量大小control: true, //是否显示控制controlBtns: ["audioTrack","quality","speedRate","volume","setting","pip","pageFullScreen","fullScreen",], //显示所有按钮,
});
</script>
5、该插件支持原生video所有事件
<template><div><vue3VideoPlaywidth="800px"title="钢铁侠":src="options.src":poster="options.poster"@play="onPlay"@pause="onPause"@timeupdate="onTimeupdate"@canplay="onCanplay"/></div>
</template><script setup>
import { reactive } from "vue";const options = reactive({src: "https://xxxx.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>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
width | 播放器宽度 | string | - | 800px |
height | 播放器高度 | string | - | 450px |
color | 播放器主色调 | string | - | #409eff |
src | 视频资源 | string | - | - |
title | 视频名称 | string | - | - |
type | 视频类型 | string | - | video/mp4 |
poster | 视频封面 | string | - | 视频第一帧 |
webFullScreen | 网页全屏 | boolean | - | false |
speed | 是否支持快进快退 | boolean | - | true |
currentTime | 跳转到固定播放时间(s) | number | - | 0 |
playsinline | ios 点击屏幕是否全屏 | boolean | - | false |
muted | 静音 | boolean | - | false |
speedRate | 倍速配置 | array | - | [“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”] |
autoPlay | 自动播放 | boolean | - | false,为 true 时会自动静音 |
loop | 循环播放 | boolean | - | false |
mirror | 镜像画面 | boolean | - | false |
ligthOff | 关灯模式 | boolean | - | false |
volume | 默认音量 | number | 0-1 | 0.3 |
control | 是否显示控制器 | boolean | - | true |
controlBtns | 控制器显示的按钮 | array | [‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’] | [‘audioTrack’, ‘quality’, ‘speedRate’, ‘volume’, ‘setting’, ‘pip’, ‘pageFullScreen’, ‘fullScreen’] |
preload | 预加载 | string | meta/auto/none | auto |
controlBtns 按钮说明
名称 | 说明 |
---|---|
audioTrack | 音轨切换按钮 |
quality | 视频质量切换按钮 |
speedRate | 速率切换按钮 |
volume | 音量 |
setting | 设置 |
pip | 画中画按钮 |
pageFullScreen | 网页全屏按钮 |
fullScreen | 全屏按钮 |
事件Events
事件名称 | 说明 | 回调 |
---|---|---|
mirrorChange | 镜像翻转事件 | val |
loopChange | 循环播放开关事件 | val |
lightOffChange | 关灯模式事件 | val |
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 |
快捷键说明
键名 | 说明 |
---|---|
Space(空格) | 暂停/播放 |
方向右键 → | 单次快进 10s,长按 5 倍速播放 |
方向左键 ← | 快退 10s |
方向上键 ↑ | 音量+10% |
方向下键 ↓ | 音量-10% |
Esc(退出) | 退出全屏/退出网页全屏 |
F(就是F键) | 全屏/退出全屏 |
vue3视频播放插件相关推荐
- vue3视频播放插件vue3-video-play的具体使用方法
vue3-video-play插件是基于原生的HTML5中的<video>标签开发的,所以支持原生<video>标签的所有原生属性和方法 npm安装 npm i vue3-vi ...
- embedv.php_PHP与视频播放插件功能实现,非常简单
PHP与视频播放插件功能实现,非常简单 龙行 PHP 2018-8-28 2579 0评论 最近在研究maccms所以会接触到这个ckplayer播放器,那么如何 php与视频 ...
- web视频播放插件:Video For Everybody
相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...
- unity android 播放器,Unity3D 安卓视频播放插件 WRP Android Video Player Pro
通过这个安卓视频播放插件,你可以在你的Unity3D 项目中针对很容的播放视频. Easily play videos in your Unity Android Projects with this ...
- 【Unity3D插件】AVPro Video插件分享《视频播放插件》
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给 ...
- vue 视频播放插件VideoPlayer
vue 视频播放插件VideoPlayer 1.npm install vue-video-player --save 2.main.js引入 import VideoPlayer from 'vue ...
- 跟我一步一步实现 Flutter 视频播放插件 (一)
当团队准备着手做 APP 时,我们把目标对准了 Flutter,尤其近期 Flutter 的使用热度一直不断攀升.由于第一次使用 Flutter,就想通过自己的实践去提升自己的能力. 在做 APP 时 ...
- 使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰 先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...
- 视频播放插件(video.js)
一.视频播放插件 1.插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Fla ...
最新文章
- 揭秘vue——vue-cli3全面配置
- 编码区和非编码区的关系
- python工作区是什么_VSCode工作区
- 荣耀20青春版鸿蒙,荣耀20青春版曝光,浴霸三摄+麒麟810+系统亮点满满
- 从ini文件里面读取配置文件
- Python框架篇之Django(Models的多表操作)
- 蒸妙集团用科学熏蒸法,弥补现代人在运动上的缺乏
- 3、Keras中的顺序模型Sequential和函数式模型Model
- 无线摄像头服务器关闭,监控摄像头服务器停止
- 618小红书行业投放报告,洞察全盘数据
- ZeroMQ文档白嫖:一文述完ZeroMQ的套接字选项
- 中环混改尚存变数 高调的TCL要上演“资本魔输”?
- THUSC2018滚粗记
- PS笔记:调色部分理论基础
- python快速幂算法解决大数取模
- 计算机网络---局域网与广域网
- 百度地图js轨迹展示
- 百度地图API调用问题-sn 的生成
- 程序人生 - 太突然!浙江重大宣布!真的不敢相信!
- springboot2.0优雅关闭
热门文章
- 1 Accuracy作为指标有哪些局限性
- win10怎么显示文件后缀_U盘数据丢失怎么恢复?数据恢复软件推荐
- while ... Wend循环语句的用法
- <Zhuuu_ZZ>数据库设计:吃货联盟
- java毕业生设计学校图书资源交易平台计算机源码+系统+mysql+调试部署+lw
- 神犇营-15-输出绝对值
- java gui qq_JAVA-GUI练习实例,QQ登录界面
- 人工智能AI库Spleeter免费人声和背景音乐分离实践(Python3.10)
- oracle 存储过程 exception,oracle存储过程中exception问题
- NetBIOS特性简介