0.0.2 • Published 4 years ago
@bwrong/v-video v0.0.2
v-video
基于videojs封装的Vue指令，简化videojs创建流程
使用方法
- 组件注册
import videojs from 'video.js'; // 需要依赖video.js
import myVideo from 'v-video';
Vue.use(myVideo,{
// options...
})- 使用组件
为了兼容原生video标签，在原生video标签上加上v-video指令即可，然后通过props传入参数
<video v-video controls src="./assets/media/demo.mp4" poster="./assets/img/img1.jpg"></video>API
Directive
| 名称 | 说明 |
|---|---|
v-video | 将元素初始化为videojs播放器 |
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 |
Methods
正常来说，上述API能够满足日常使用，如果需要使用videojs的方法及其他高级用法，可采用如下方式： 1. 使用ref标识元素，名字可以自定义
<!-- html -->
<video v-video controls src="./assets/media/demo.mp4" poster="./assets/img/img1.jpg" ref="video"></video>- 获取对应的videojs实例
// js
// 这里的例子使用计算属性computed，也可直接使用this.$refs.video.videoPlayer
computed: {
videoPlayer: function () {
return this.$refs.video.videoPlayer;
}
},- 使用videojs实例上的属性和方法，一般在mounted生命周期使用
所有官方的方法均可使用，具体用法见官方文档。
// 播放
this.videoPlayer.play();
// 暂停
this.videoPlayer.pause();
// 销毁
this.videoPlayer.dispose();
// 事件监听
this.videoPlayer.on(eventName,fn);
// 触发事件
this.videoPlayer.trigger(eventName);
// 更多用法见官方文档