vtrim v0.1.14

✂️ Vtrim ✂️

Easily trim your medias with a fully customizable timeline.

• Mobile touch events support 📱
• Styled by default and fully customizable 🎨
• Audio 🎵 and video 🎞️ compatible

✨ Demo

Demo

📖 Table of contents

• Installation
• Getting started
• Props
• Events
• Slots

📥 Installation

npm install vtrim

You can then register Vtrim globally in your entry file with Vue.use() or locally by importing the component where you need it:

// main.js
import Vtrim from 'vtrim';

Vue.use(Vtrim);

or

// myComponent.vue
import { Vtrim } from 'vtrim';

export default {
  name: 'myComponent',
  components: { Vtrim }
};

🚀 Getting started

<template>
  <figure>
    <video
      @durationchange="event => mediaDuration = event.target.duration"
      @loadedmetadata="event => mediaDuration = event.target.duration"
      @timeupdate="event => currentTime = event.target.currentTime"
      preload="metadata"
      src="...">
    <video>

    <Vtrim
      @trim-start="trim => trimStart = trim"
      @trim-end="trim => trimEnd = trim"
      :currentTime="currentTime"
      :mediaDuration="mediaDuration">
    </Vtrim>

    <button
      @click="saveTrim"
      type="button">
      Save
    </button>
  </figure>
</template>

<script>

import { Vtrim } from 'vtrim';

export default {
  name: 'App',
  components: { Vtrim },
  data: () => ({
    currentTime: 0,
    mediaDuration: 0,
    trimStart: 0,
    trimEnd: 0,
  }),
  methods: {
    async saveTrim() {
      await api.saveTrim({ start: this.trimStart, end: this.trimEnd });
    }
  }
}

</script>

⚙️ Props

🚨 Events

🧱 Slots