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>