DragKit Video Editor — 完全チュートリアル

1. Getting Started

Launching the Editor

DragKit Video Editor runs entirely in your browser — no downloads, no sign-ups, no file uploads to any server. Your media stays private on your device at all times.

Navigate to the Video Editor page and the editor loads instantly. The first time you visit, an interactive guided tour will walk you through every feature.

Understanding the Workspace

The editor has four main areas:

• Media Library (left) — Import and organize your video, audio, and image files
• Preview Panel (center) — Watch your video in real-time as you edit
• Timeline (bottom) — Arrange clips on 5 tracks (V1-V3 video + A1-A2 audio)
• Transitions & Export (right) — Apply effects and export your final video

Importing Media

There are three ways to add files:

1. Drag & Drop — Drag files directly from your file explorer into the Media Library area
2. Click the + button — Open a file picker to browse and select files
3. Multiple files — Select several files at once for batch import

Supported formats include MP4, WebM, MOV, AVI, MKV (video), MP3, WAV, OGG, AAC (audio), and JPG, PNG, GIF, WebP (images).

Media Filters

Use the filter tabs at the top of the Media Library to quickly switch between:

• ALL — Show everything
• VID — Video files only
• AUD — Audio files only
• IMG — Images only

2. Timeline Editing

Adding Clips to the Timeline

From the Media Library, drag any file onto one of the timeline tracks:

• V1, V2, V3 — Video and image tracks. V3 renders on top of V2, which renders on top of V1 (layer priority)
• A1, A2 — Audio tracks for music, voiceover, and sound effects

When you drop media on a track, it creates a clip — a segment of that media on the timeline. You can have unlimited clips per track.

Moving Clips

With the Select tool (▶) active, click and drag any clip to:

• Move it left or right on the same track (change timing)
• Move it to a different track (change layer order)

When Snap is enabled (checkbox in the top-right), clips will snap to the edges of other clips and to the playhead for precise alignment.

Trimming Clips

Hover over the left or right edge of any clip — the cursor changes to a resize handle. Then:

1. Drag the left edge to trim the beginning (in-point)
2. Drag the right edge to trim the end (out-point)

A tooltip shows the exact trim time as you drag. The underlying media is never deleted — you can always extend the clip back to reveal trimmed content.

Splitting Clips (Razor Tool)

The Razor Tool (✂) lets you split any clip at a precise point:

1. Click the Razor button (✂) in the toolbar, or press the keyboard shortcut
2. Click anywhere on a clip — it splits into two independent clips at that point
3. Switch back to the Select tool (▶) to move or delete the segments

This is essential for removing unwanted sections: split before and after the section, select the middle piece, and press Delete.

Deleting Clips

Select a clip (click on it — it gets a colored border), then press Delete or Backspace. You can also use the 🗑 button in the toolbar.

3. Multi-Track Editing

Understanding Layers

DragKit supports 5 simultaneous tracks — 3 for video/images and 2 for audio:

Layering Videos and Images

When clips overlap across video tracks, the higher track takes priority. Use this to create:

• Picture-in-picture — Small video on V3 over main video on V1
• Title cards — Image with text on V2 over footage on V1
• Watermarks — Logo on V3 visible throughout the entire video

Audio Mixing

Audio from all tracks (including video tracks) is mixed together during export. Each track has:

• Mute button (speaker icon) — Click to mute/unmute the entire track
• Volume slider — Drag to adjust volume from 0% to 200% (boost supported)

Tip: Place background music on A1 at low volume, and voiceover on A2 at full volume for a professional mix.

Waveform Display

Audio clips show a visual waveform, making it easy to identify silent sections, peaks, and transitions in the audio. This helps with precise synchronization.

4. Transitions & Effects

Available Transitions

DragKit includes 7 professional transition types:

Applying Transitions

1. Find the Transitions panel on the right side of the editor
2. Drag any transition type onto the gap between two clips on the same track
3. The transition appears as a diamond icon between the clips
4. Click on the transition to change its type

Adjusting Duration

Set the transition duration using the Duration field in the Transitions panel (in seconds). Typical values:

• 0.3-0.5s — Quick, subtle transitions
• 1.0s — Standard, smooth transitions
• 2.0+s — Dramatic, cinematic transitions

Preview Transitions

Press Play or click on the timeline to seek near the transition point. The Preview Panel shows transitions in real-time, exactly as they'll appear in the exported video.

5. Advanced Features

Speed Control (Slow Motion & Fast Forward)

Select any clip, then use the Speed slider in the right panel:

• 25% — Ultra slow motion (4x slower)
• 50% — Half speed slow motion
• 100% — Normal speed
• 200% — Double speed (time-lapse effect)
• 400% — Maximum fast-forward

The clip's visual length on the timeline adjusts automatically to reflect the new duration.

IN/OUT Markers

Markers let you define a specific segment for export or loop playback:

1. Seek to the desired start point → click Set IN (or press I)
2. Seek to the desired end point → click Set OUT (or press O)
3. The selected range appears highlighted on the timeline ruler

When exporting, only the segment between IN and OUT markers is rendered (if set).

Loop Playback

Click the Loop button (🔁) to toggle loop mode. When active, playback automatically repeats from the start when it reaches the end (or the OUT marker).

Timeline Zoom

Use the zoom slider at the top of the timeline area:

• Zoom in (+) for frame-accurate editing
• Zoom out (-) to see the full project duration
• Values range from 10% to 500%

Image Fit Modes

When adding images to video tracks, right-click (or double-click) to choose how the image fills the preview frame:

• Cover — Fill the entire frame (may crop edges)
• Contain — Fit within the frame (may show bars)
• Fill — Stretch to fill exactly

Save & Load Projects

Your project is automatically saved in the browser (IndexedDB). Additionally:

• 💾 Save — Export a .json project file to your computer
• 📂 Load — Import a previously saved project file

This lets you work across sessions or share project files with others.

6. Exporting Your Video

Export Formats

DragKit supports two industry-standard formats:

Quality Presets

• ⚡ Fast (Recommended) — Good quality, fastest processing time
• 🎬 High Quality — Maximum quality, slower processing

How to Export

1. Arrange your clips on the timeline
2. Optionally set IN/OUT markers to export only a segment
3. Choose your format (MP4 or WebM) from the dropdown
4. Select quality preset
5. Click the Export button
6. Wait for processing — a progress bar shows the percentage
7. When complete, the file downloads automatically

Important Notes

• Processing happens 100% on your device using WebAssembly (FFmpeg WASM)
• The first export may take a moment to load the processing engine (~31MB)
• Subsequent exports in the same session are faster (engine is cached)
• Export time depends on video length, complexity, and your device's power
• Your files never leave your computer — complete privacy guaranteed