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:

  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.