vue-video-tape v1.1.0

安装

npm install vue-video-tape

全局引入

improt VueVideoTape from "vue-video-tape";
Vue.use(VueVideoTape);

组件内引入

improt {VueVideoTape} from "vue-video-tape";

export default {
	components:{VueVideoTape}
}

属性

事件

手动事件

如果觉得使用属性控制事件的方式比较麻烦,可以直接调用组件的事件进行操作.

使用方法(通过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
}

}