vue3视频播放插件vue3-video-play的具体使用方法
vue3-video-play插件是基于原生的HTML5中的<video>标签开发的,所以支持原生<video>标签的所有原生属性和方法
npm安装
npm i vue3-video-play --save
SPA 单页面使用示例
<template><div><videoPlay v-bind="options" @play="onPlay"@pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" /></div>
</template><script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'export default {name: '',components: {videoPlay},setup() {console.log('1-开始创建组件-setup')const data = reactive({options: {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: "https://yun.66dm.net/SBDM/SummerTimeRendering23.m3u8", //视频源poster: '', //封面type: 'm3u8', //视频类型}})onBeforeMount(() => {console.log('2.组件挂载页面之前执行----onBeforeMount')})onMounted(() => {console.log('3.-组件挂载到页面之后执行-------onMounted')})const onPlay = (ev) => {console.log('播放')}const onPause = (ev) => {console.log(ev, '暂停')}const onTimeupdate = (ev) => {console.log(ev, '时间更新')}const onCanplay = (ev) => {console.log(ev, '可以播放')}return {...toRefs(data),onPlay,onPause,onCanplay,onTimeupdate}},
}</script>
<style scoped lang='less'>
</style>
可选属性
名称 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 | - | 视频第一帧 |
可选事件
事件名称 | 说明 | 回调 |
---|---|---|
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 |
vue3视频播放插件vue3-video-play的具体使用方法相关推荐
- vue3视频播放插件
1.效果图(网上随便找的视频用来测试的,所以有个水印) 2.引入插件 npm 安装:npm i vue3-video-play --save yarn 安装:yarn add vue3-video-p ...
- 【Unity3D插件】AVPro Video插件分享《视频播放插件》
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给 ...
- linux 视频 插件,avpro video 插件-Avpro Video(Unity视频播放插件)下载 v1.039官方免费版--pc6下载站...
AvproVideo是一款由强大团队出品的可以在Unity上安装使用的万能多平台视频播放插件AvproVideo支持WindowslinuxiosmacAndroid等多平台万能播放.. 相关软件软件 ...
- springboot + vue3实现视频播放Demo(video.js Vue3-video-play视频播放器)
文章目录 学习链接 前言 ffmpeg 安装ffmpeg 配置环境变量 分割视频文件 后台配置 WebConfig 前端代码 video.js示例 安装依赖 视频播放组件 效果 Vue3-video- ...
- html5播放器 迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
- 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 ...
- 使用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 ...
最新文章
- Oracle数据库如何查看当前用户角色权限及默认表空间
- python分析nginx日志
- 【OpenCV 例程200篇】73. 二维连续傅里叶变换
- datatables data bind json
- leetcode @python 123. Best Time to Buy and Sell Stock III
- 完成中国福利彩票快三的程序设计
- armv6、armv7、armv7s、armv8、armv64及其i386、x86_64区别
- pg_repack --no-order 某个表的过程分析
- 因果AI热度背后的打靶迷局
- 一天掌握数据结构与算法,建议收藏
- 【Vue知识点- No4.】vue组件、组件通信、Todo案例
- 半夜开piao竟然被罚
- oracle中索引的使用
- 公有云上基于微服务架构SAAS产品研发实践「活动通知」
- NURBS求取basis函数的代码
- ubuntu安装eclipse报错问题集
- PCI设备与PCI桥的配置空间
- python3.8.2怎么卸载_Python卸载
- Simulink中Inport控件的使用
- 微博的世界,世界的微博