Kinetoscope Editor

A lightweight video trimming and splitting tool built with plain JavaScript and Vite. Upload a video, add trim points, and either export a splice manifest or create browser-side clips.

Features

• Drag & drop video upload
• Visual timeline scrubber
• Add multiple trim points
• Split video into clips at trim points
• Lightweight manifest export without loading FFmpeg.wasm
• Optional browser-side splitting using FFmpeg.wasm
• Download processed clips

Development

Install dependencies:

npm install

Start the development server:

npm run dev

Building

Build for production:

npm run build

This creates a distributable library in the dist/ folder that can be published to npm.

Usage

As a standalone app

Open the development server and use the interface to:

1. Drag or select a video file
2. Scrub through the timeline
3. Click "Add Trim Point" at desired split locations
4. Click "Export Clips" to download the split videos

As a library

Add the following markup to your app. The editor uses these element IDs; you can provide your own classes and styles.

<div id="app">
  <div id="dropzone" class="dropzone">
    <p>Drag &amp; drop a video file here or click to select</p>
    <input type="file" id="fileInput" accept="video/*" hidden>
  </div>

  <div id="videoContainer" class="video-container" style="display: none;">
    <video id="videoPlayer" controls></video>

    <div class="timeline-container">
      <canvas id="timeline" class="timeline"></canvas>
      <div id="trimMarkers" class="trim-markers"></div>
    </div>

    <div class="controls">
      <button id="addTrimBtn" class="btn">Add Trim Point</button>
      <button id="clearTrimsBtn" class="btn">Clear All Trims</button>
      <button id="exportBtn" class="btn btn-primary">Export Clips</button>
    </div>

    <div id="status" class="status"></div>
  </div>
</div>

Then initialize the editor:

import { VideoEditor } from 'kinetoscope-editor';

const editor = new VideoEditor({
  rootId: 'app',
  dropzoneId: 'dropzone',
  fileInputId: 'fileInput',
  videoContainerId: 'videoContainer',
  videoPlayerId: 'videoPlayer',
  timelineId: 'timeline',
  trimMarkersId: 'trimMarkers',
  addTrimBtnId: 'addTrimBtn',
  clearTrimsBtnId: 'clearTrimsBtn',
  exportBtnId: 'exportBtn',
  statusId: 'status',
  onExportClips: async (clips) => {
    // Upload, save, or otherwise handle the generated clips.
    // Each clip contains a `url` and `filename`.
  }
});

Pass rootId or rootElement to scope all element lookup to one editor. If neither is provided, the IDs are resolved from document for compatibility with versions before 1.1.0.

Export a manifest

Manifest export does not initialize or download FFmpeg.wasm. It returns the original File, its duration in integer milliseconds, and the ordered splice positions. An application can upload the original file once and process the segments on its server.

const editor = new VideoEditor({
  rootId: 'app',
  dropzoneId: 'dropzone',
  fileInputId: 'fileInput',
  videoContainerId: 'videoContainer',
  videoPlayerId: 'videoPlayer',
  timelineId: 'timeline',
  trimMarkersId: 'trimMarkers',
  addTrimBtnId: 'addTrimBtn',
  clearTrimsBtnId: 'clearTrimsBtn',
  exportBtnId: 'exportBtn',
  statusId: 'status',
  allowedMimeTypes: ['video/mp4', 'video/quicktime', 'video/webm'],
  maxFileSizeBytes: 1024 * 1024 * 1024,
  maxDurationMs: 2 * 60 * 60 * 1000,
  maxSegments: 100,
  minSegmentDurationMs: 1000,
  onExportManifest: async ({ sourceFile, durationMs, breakpointsMs }) => {
    // Upload sourceFile and submit durationMs + breakpointsMs to your server.
  },
  onFileLoaded: ({ file, durationMs }) => {},
  onStateChange: ({ state, ...details }) => {},
  onError: (error) => {}
});

Zero trim points is valid and describes one segment covering the full video. editor.getManifest() returns the current manifest without invoking the export callback.

Call editor.destroy() before removing the editor from the page. This removes its event listeners, revokes the video preview URL, and terminates a browser FFmpeg instance if one was created.

Timeline colors can be adapted to an application's theme:

timelineColors: {
  background: '#fafafa',
  marker: '#dddddd',
  label: '#666666',
  playhead: '#2196f3'
}

If both export callbacks are supplied, onExportManifest takes precedence.

Export browser-generated clips

onExportClips is optional. If it is not provided, the editor downloads each clip in the browser as before. When provided, it receives the generated clips instead; it may return a promise, which the editor will wait for. The callback owns any cleanup of the clip object URLs (for example, URL.revokeObjectURL(clip.url)) after it has finished using them.

Browser video processing

The legacy clip-export path loads FFmpeg.wasm only when it is used. It currently invokes FFmpeg with -c copy, which copies the existing streams into separate MP4 files without re-encoding or compressing them. Stream copying is fast, but cuts may align to nearby keyframes rather than an exact requested frame. Applications that require normalized codecs, predictable file sizes, or frame-accurate boundaries should use manifest export and transcode server-side.

License

MIT