v-videojs
基于video.js
封装的Vue指令,用于创建一个视频播放器。
使用方法
在video
上添加v-video
指令,部分参数可以通过props传入,也可以全局配置,props拥有更高优先级。
; // 需要依赖video.js;videojs; // 添加语言Vue
API
Directive
名称 | 说明 |
---|---|
v-video |
创建video.js 播放器 |
Props
属性 | 必须 | 说明 | 类型 | 默认值 |
---|---|---|---|---|
src | yes | 视频文件地址 | String | - |
poster | no | 封面文件地址 | String | 视频第一帧 |
width | no | 宽度 | String | 100% |
height | no | 高度 | String | 100% |
controls | no | 是否显示控件 | Boolean | false |
autoplay | no | 自动播放 | Boolean | false |
preload | no | 预加载,可选项:'auto'、'metadata'、'none' | String | 'auto' |
muted | no | 静音 | Boolean | false |
Events
支持video元素所有事件
Methods
正常来说,上述API能够满足日常使用,如果需要使用video.js
的方法及其他高级用法,可采用如下方式:
- 使用ref标识元素,名字可以自定义
<!-- html -->
- 获取
video.js
实例
// js// 这里的例子使用计算属性computed,也可直接使用 this.$refs.video.videoPlayercomputed: { return this$refsvideovideoPlayer; }
- 使用
video.js
实例上的属性和方法,在mounted生命周期使用
所有官方的方法均可使用,具体用法见官方文档。
// 播放thisvideoPlayer;// 暂停thisvideoPlayer;// 销毁thisvideoPlayer;// 事件监听thisvideoPlayer;// 触发事件thisvideoPlayer;// ....// 更多用法见官方文档