ZWPlayer Local Playback Guide

ZWPlayer supports playing local video and audio files directly, with no server upload required. All files are processed locally in the browser, ensuring data privacy. Local playback is a key feature of ZWPlayer, ideal for education, content review, and offline demos.

1. Supported Media Formats

Video Formats

Audio Formats

Tip: Browser format support depends on built-in decoders. MP4 (H.264) and WebM (VP8/VP9) offer the best compatibility and are recommended.

2. How to Add Files

Once local playback is enabled, files can be added in two ways:

Method 1: Drag & Drop

Drag files directly from your file manager onto the player window:

• Single video: Starts playing immediately
• Multiple videos: Automatically creates a local playlist, sorted by filename
• Videos + auxiliary files: Subtitles, chapters, annotations, and other resources are automatically matched by filename

When dragging, the player displays a blue dashed border with a “Drag video/audio files here to play” prompt. Release to load.

Supported auxiliary file types:

Naming convention: Auxiliary resource files use the video filename as a base, with a functional suffix appended. Separators can be _, -, or ..

For example, if the video file is lesson1.mp4:

lesson1.mp4                          ← Video file
lesson1_chapter.json                 ← Chapter data
lesson1_subtitle.srt                 ← Subtitle file
lesson1_thumbnail.json               ← Progress bar thumbnails
lesson1_annotation.json              ← Interactive annotations
lesson1_watermark.json               ← Watermark configuration

Method 2: Click Button to Select

Click the local playback button (folder icon) on the control bar to open the system file picker:

• Supports multi-file selection (hold Ctrl/Command to select multiple files)
• The file picker automatically filters to supported format types
• You can select videos, audio, subtitles, chapters, and other file types simultaneously

3. Features & Use Cases

Segment Loop Playback

The segment selection feature lets you extract any portion of a video for loop playback:

1. Click the segment selection button on the control bar to activate segment mode
2. Drag the start and end handles on the progress bar to select the target segment
3. Switch to “Repeat One” mode to loop the selected segment

This feature is ideal for:

• Music practice: Extract passages that need repeated practice
• Language learning: Extract dialogue segments for repeated listening
• Motion analysis: Extract key movements from sports videos for slow-motion review

Tip: If chapters are loaded, you can click the loop button in the chapter list to automatically set that chapter as the loop segment.

Building a Local Playlist

When multiple video files are dragged in, the player automatically creates a local playlist with full functionality:

• Search, favorites, and history management
• Four play modes (Continuous, Loop All, Repeat One, Play Once)
• Previous/Next buttons on the control bar for quick switching
• Keyboard shortcuts Q, [, ]

For detailed features, see the Playlist Feature Guide.

Deep Application in Teaching Scenarios

Local playback is most widely used in educational settings. A typical workflow:

1. Instructor prepares materials: Equip each teaching video with chapters (marking knowledge points), subtitles (assisting hearing-impaired students), and interactive annotations (in-class quizzes)
2. Classroom demonstration: Drag all files into the player to instantly load the fully enhanced video
3. Knowledge point navigation: Use chapter markers to quickly jump to specific topics
4. Interactive teaching: Playback pauses automatically at annotated time points, displaying quiz questions for students to answer in real time
5. Segment replay: Use segment looping on key or difficult sections for repeated explanation

4. Enabling Local Playback

Configuration

Enable local playback via the localPlayback parameter:

new ZWPlayer({
    playerElm: '#player-holder',
    localPlayback: true   // Enable local playback
});

UI Changes

After enabling, the player interface changes:

• Control bar: A folder icon button appears; click to open the file picker
• Player area: When no video is loaded, a “Click or drag files here to play” prompt is displayed
• Drop zone: The entire player area accepts file drag & drop

Quick Start

You can also visit the Online Player directly, which has local playback built in — just open it and start using it with no additional configuration needed.