安装
npm install vue-video-tape
全局引入
improt VueVideoTape from "vue-video-tape";
Vue.use(VueVideoTape);
组件内引入
improt {VueVideoTape} from "vue-video-tape";
export default {
components:{VueVideoTape}
}
属性
属性名 |
属性值 |
是否必填 |
介绍 |
playerOptions |
Object |
true |
video配置(参考videojs文档) |
videoFileName |
String |
false |
录制视频结束后返回的文件名 |
screenshoted |
Boolean |
false |
当为true时,触发截图事件 |
startCaptured |
Boolean |
false |
当为true时,开始录制 |
stopCaptured |
Boolean |
false |
当为true时,停止录制 |
事件
事件名 |
参数 |
介绍 |
videoData |
url,file |
录制结束后触发,第一个参数是可以直接播放的url,第二个参数是返回的视频文件 |
imageData |
base64 |
截图成功后触发,返回截图的base64 |
手动事件
如果觉得使用属性控制事件的方式比较麻烦,可以直接调用组件的事件进行操作.
事件名 |
介绍 |
screenshot |
截图 |
startCapture |
开始录制 |
stopCapture |
结束录制 |
使用方法(通过ref
属性,父组件调用子组件的方法):
<template>
<div>
<VueVideoTape
:playerOptions='options'
ref="videotape"
@imageData="imageData"
@videoData="videoData"
></VueVideoTape>
</div>
</template>
<script>
import VueVideoTape from 'vue-video-tape'
export default {
data(){
return{
options:{
width:600,
sources:[
{
src:'http://.........'
}
]
}
}
},
methods:{
image(){
this.$refs.videotape.screenshot();
},
start(){
this.$refs.videotape.startCapture();
},
stop(){
this.$refs.videotape.stopCapture();
},
imageData(base64){},
videoData(url,file){},
},
components:{
VueVideoTape
}
}
</script>