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+ |