3.3.4 • Published 3 years ago
vue-m-video
基于vue的移动端视频播放器
安装
npm i m-vue-video --save
引入使用
// 在main.js引入
import MVueVideo from 'm-vue-video'
Vue.use(MVueVideo)
// 页面中
<m-vue-video :height="`40%`" :url="url" mediaType="mp4"></m-vue-video>
属性
| 名称 | 类型 | 可选值 | 默认值 | 说明 | 版本差异 |
|---|
| muted | boolean | false/true | false | 是否静音播放 |
| fullscreen | boolean | false/true | false | 是否全屏 |
| url | string | - | - | 视频地址 |
| mediaType | string | mp4等 | - | 视频类型(不填时会根据视频地址自动判断/.MOV类型视频请传mp4) |
| width | string | 像素值 | 100% | 播放器宽度 |
| height | string | 像素值 | 100% | 播放器高度 |
| autoplay | boolean | false/true | false | 自动播放 | @V3.0.0+ |
| loop | boolean | false/true | false | 循环播放 | @V3.0.0+ |
| currentTime | Number | Number | 0 | 指定视频播放进度 | @V3.1.0+ |
| playing | boolean | true/false | true | 视频播放状态 | @V3.3.2+ |
事件
| 事件名称 | 说明 | 回调参数 | 版本差异 |
|---|
| on-seeked | 拖动进度条结束时间 | {currentTime: 1.001} | @V3.1.0+ |
| on-time-update | 监听进度条改变事件 | {currentTime: 1.001} | @V3.1.0+ |
| on-play | 播放事件 | - | @V3.2.0+ |
| on-pause | 暂停事件 | - | @V3.2.0+ |
| on-fullscreenchange | 监听全屏事件 | {fullscreen: true} | @V3.3.0+ |
| on-canplaythrough | 监听视频加载完成事件 | - | @V3.3.4+ |