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
| Format | Extension | Notes |
|---|---|---|
| MP4 | .mp4, .m4v |
The most universal video format, supported by all browsers |
| WebM | .webm |
Open format, natively supported by Chrome, Firefox, and Edge |
| OGG | .ogg, .ogv |
Open format, natively supported by Chrome, Firefox, and Opera |
| MOV | .mov |
QuickTime format, supported by modern browsers |
| MKV | .mkv |
Matroska container; browser support depends on internal codec |
Audio Formats
| Format | Extension | Notes |
|---|---|---|
| MP3 | .mp3 |
The most universal audio format |
| WAV | .wav |
Uncompressed audio format |
| FLAC | .flac |
Lossless compressed audio format |
| M4A | .m4a |
AAC audio format |
| Opus | .opus |
Highly efficient audio codec |
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:
| Resource Type | File Extensions | Matching Rule | Description |
|---|---|---|---|
| Subtitles | .srt, .vtt, .webvtt, .bcc, .json |
videoname_subtitle or same name |
Add multilingual subtitles to videos |
| Chapters | .json, .vtt, .webvtt |
videoname_chapter or same name |
Display chapter markers on the progress bar |
| Thumbnail Preview | .json |
videoname_thumbnail or same name |
Show preview frames when hovering over the progress bar |
| Annotations | .json |
videoname_annotation or same name |
Overlay interactive hotspots, buttons, quizzes |
| Watermarks | .json |
videoname_watermark or videoname_wm |
Overlay brand logos or anti-screen-recording watermarks |
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
Smart Subtitle Drag & Drop
The subtitle drag & drop feature has been comprehensively enhanced, supporting multiple subtitle files dropped at once with automatic management:
- Drag multiple subtitles at once: Drop several subtitle files at once (e.g., Simplified Chinese, Traditional Chinese, English, Japanese) and the player automatically matches each subtitle to its corresponding video — no need to add them one by one. In multi-video scenarios, subtitles are assigned by filename similarity score; in single-video scenarios, all dropped subtitles are loaded permissively.
- Automatic language detection: The language is detected from the subtitle filename (covering 50+ languages including Simplified/Traditional Chinese, Japanese, Korean, English, French, German). When detected, the subtitle title shows a localized language name (e.g., “CHS”, “Japanese”) instead of the raw filename.
- Clean subtitle naming: Subtitle titles are automatically cleaned — the video name, release tags (1080p, web-dl, bluray, etc.), and subtitle keywords (subtitle, sub, caption, etc.) are stripped, and Latin characters are formatted in Title Case for tidy, readable titles in the menu.
Multilingual subtitle naming example (for video lesson1.mp4):
lesson1.zh.srt ← Simplified Chinese, menu shows "CHS"
lesson1.cht.srt ← Traditional Chinese, menu shows "CHT"
lesson1.en.srt ← English, menu shows "English"
lesson1.ja.srt ← Japanese, menu shows "Japanese"
Tip: The language code is usually placed at the end of the filename, separated by
.,_, or-(e.g.,lesson1.zh.srt,lesson1_zh.srt). When the language cannot be identified from the filename, the player further reads the subtitle content to detect the language (e.g., distinguishing Simplified vs. Traditional Chinese).
3. Features & Use Cases
Segment Loop Playback
The segment selection feature lets you extract any portion of a video for loop playback:
- Click the segment selection button on the control bar to activate segment mode
- Drag the start and end handles on the progress bar to select the target segment
- 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:
- Instructor prepares materials: Equip each teaching video with chapters (marking knowledge points), subtitles (assisting hearing-impaired students), and interactive annotations (in-class quizzes)
- Classroom demonstration: Drag all files into the player to instantly load the fully enhanced video
- Knowledge point navigation: Use chapter markers to quickly jump to specific topics
- Interactive teaching: Playback pauses automatically at annotated time points, displaying quiz questions for students to answer in real time
- 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.