1.1.3 • Published 4 years ago
vue-frame-video v1.1.3
vue-frame-video
alpha test
attribute
| attribute | type | default | description |
|---|---|---|---|
| src | String | video URI | |
| controls | Boolean | false | default video UI |
| autoplay | Boolean | false | autoplay |
| muted | Boolean | false | Mute |
| loop | Boolean | false | loop |
| initail-time | Number | 0 | initial time (seconds) |
| play | eventhandle | Fires the play event when starting/continuing playback | |
| pause | eventhandle | Fires the pause event when paused | |
| timeupdate | eventhandle | Triggered when the playback progress changes {currentTime, duration} | |
| fullscreenchange | eventhandle | Triggered when the video enters fullscreen or exits full screen {fullScreen} | |
| waiting | eventhandle | Triggered when video buffering | |
| error | eventhandle | Triggered when video playback error occurs{ret,msg} | |
| progress | eventhandle | Triggered when loading progress changes {buffered}, % | |
| frameupdate | eventhandle | Triggered when the playback frame changes {SMPTE}(hh:mm:ss:ff) |
method
| method | type | return | description |
|---|---|---|---|
| play() | Play and resume | ||
| pause() | Pause | ||
| currentTime(Seconds) | (Number) | (Number) | Get the current playback time point, or set the playback time point, which cannot exceed the video duration |
| duration() | (Number) | Get video duration | |
| volume(percent) | (Number)0,1/null | Number | |
| requestFullscreen() | enter fullscreen | ||
| exitFullscreen() | exit fullscreen | ||
| isFullscreen() | Boolean | Returns whether video has entered full screen | |
| on(type，listerner) | (String, Function) | Listening event | |
| one(type，listerner) | (String, Function) | Listening event, event handlers are only executed at most once | |
| off(type，listerner) | (String, Function) | Unbind event listener | |
| buffered() | TimeRanges | return TimeRanges of video buffers | |
| bufferedPercent() | 0,1 | Returns the buffer length as a percentage of the video duration | |
| dispose() | Destroy the player | ||
| seekForward() | seekForward one Frame | ||
| seekBackward() | seekBackward one Frame | ||
| captureIMG(width,height,scale) | (width:Number viedeoWidth if pass null,height:Number viedeoHeight if pass null,scale default 1) |
example
<template>
<div id="app">
<div>
<FrameVideo
ref="videoElement"
:src="src"
:initialTime="initialTime"
:autoplay="autoplay"
@play="onPlay"
@pause="onPause"
@ended="onEnded"
@waiting="onWaiting"
@progress="onProgress"
@error="onError"
@timeupdate="onTimeupdate"
@frameupdate="onFrameupdate"
/>
</div>
<div>{{ SMPTE }}</div>
<button v-on:click="play">play</button>
<button v-on:click="pause">pause</button>
<button v-on:click="seekTest">seekTest</button>
<button v-on:click="seekForward">seekForward</button>
<button v-on:click="seekBackward">seekBackward</button>
</div>
</template>
<script>
import FrameVideo from "vue-frame-video";
var video;
export default {
name: "app",
components: {
FrameVideo
},
mounted: function() {
video = this.$refs.videoElement;
},
data() {
return {
src:
"your video",
initialTime: 0,
autoplay: false,
SMPTE:"00:00:00:00"
};
},
methods: {
play: function() {
video.play();
},
pause: function() {
video.pause();
},
seekForward: function() {
video.seekForward();
},
seekBackward: function() {
video.seekBackward();
},
onPlay: function(){
console.log('onPlay');
},
onPause:function(){
console.log('onPause');
},
onEnded:function(){
console.log('onEnded');
},
onWaiting:function(){
console.log('onWaiting');
},
onFullscreenchange: function(event) {
console.log('onFullscreenchange');
},
onTimeupdate: function(event) {
console.log('onTimeupdate',event);
},
onFrameupdate: function(event) {
this.SMPTE = event.SMPTE
},
onProgress: function(event){
console.log('onProgress',event);
},
onError: function(event){
console.log('onError',event);
}
}
};
</script>
<style>
</style>