video-editing-timeline-vue

Timeline for video editing

Usage no npm install needed!

<script type="module">
  import videoEditingTimelineVue from 'https://cdn.skypack.dev/video-editing-timeline-vue';
</script>

README

video-editing-timeline-vue

install

// npm
npm install video-editing-timeline-vue --save

// yarn
yarn add video-editing-timeline-vue

usage

// Global registry

import Vue from 'vue';
import VideoEditingTimeline from 'video-editing-timeline-vue';

Vue.use(VideoEditingTimeline);

<template>
  <VideoEditingTimeline :config="config" />
</template>

<script>

export default {
  data() {
    return {
       config: {
            canvasWidth: 5000,
            canvasHeight: 50,
            minimumScale: 10, // 一个小刻度长度(单位px)
            minimumScaleTime: 1, // 一个小刻度代表时间(单位秒)
       }
    };
  }
};
</script>

// Component registry

<template>
  <VideoEditingTimeline  :config="config" />
</template>

<script>
import VideoEditingTimeline from 'video-editing-timeline-vue';
export default {
  components: {
    VideoEditingTimeline
  },
  data() {
    return {
     config: {
        canvasWidth: 5000,
        canvasHeight: 50,
        minimumScale: 10, // 一个小刻度长度(单位px)
        minimumScaleTime: 1, // 一个小刻度代表时间(单位秒)
     }
    };
  }
};
</script>