ZWPlayer v3.3.2 Released: Bumper Ads, Music Mode, and Cross-Video Subtitle Search

Today, we are thrilled to announce the release of ZWPlayer v3.3.2! 🎉

If we were to summarize the core of this update in a single sentence:

One player that handles video playback, audio listening, content preview, and ad monetization — with subtitle search that crosses video boundaries and DASH embedded subtitles made fully usable.

This update revolves around four major directions: ad monetization, playback modes, deep subtitle search, and DASH subtitle pre-download. Let’s dive into what’s new.

💡 Get the Latest Version: In addition to the download links at the bottom, you can obtain the latest build artifacts from our release repositories:

• GitHub: zwplayer-release/releases
• Gitee: zwplayer-release/releases

1. Bumper Ads: Monetize Every Frame

In the content-driven era, delivering a great playback experience while enabling commercial monetization is a challenge every video platform faces. The new bumper ad feature in v3.3.2 lets you insert your own promo videos before or after the main content.

Use Cases

• Brand exposure: Play a brand video before the main content starts
• Content teasers: Show a trailer for the next episode after the credits roll
• Sponsorship: Offer pre-roll/post-roll ad slots to sponsors

How It Works

• Supports pre-roll (before main content) and post-roll (after main content) insertion points
• Configurable skip strategy: force full view (no skip), skippable immediately (user can skip anytime), or countdown skip (skip button appears after N seconds)
• Clean, minimal UI during ad playback; seamless transition to main content
• Supports clickThrough click-through to a landing page
• In loop mode, the ad plays — no repeated interruptions

new ZWPlayer({
  playerElm: 'player',
  url: 'main.mp4',
  bumper: {
    preRoll: {
      url: 'https://cdn.example.com/intro.mp4',
      skipOffset: 5,               // skippable after 5 seconds
      clickThrough: 'https://brand.com'
    }
  }
});

2. Playback Modes: Player, Four Forms

Different content deserves different presentation. v3.3.2 adds a mode config option that lets you switch between four playback forms with a single property — no need to build separate players for different scenarios.

Preview Mode: Hover to Peek

You’ve probably experienced this on video sites — hovering over a video card starts an automatic preview. v3.3.2’s preview mode delivers exactly that experience.

Use cases: Video lists, course catalogs, content recommendation walls, and other card-based layouts.

How it works:

• Hovering over the player auto-starts a muted, looping preview clip
• Moving the mouse away auto-pauses
• Randomly starts from the middle of the video, skipping intros and outros to show the highlights
• Set a max preview duration; auto-stops when the time is up
• Preview is always muted — multiple cards hovered simultaneously won’t create a noise disaster
• For non-standard layouts, you can also control preview start/stop programmatically via API

new ZWPlayer({
  playerElm: 'card',
  url: 'video.mp4',
  mode: 'preview',
  preview: {
    startTime: 'random',   // start at 10%-80% position
    duration: 15           // max 15 seconds per preview
  }
});

Music Mode: Immersive Audio Playback

When you play a song, a podcast, or an audiobook, seeing a black video window with just a control bar is a poor experience. v3.3.2’s music mode provides a professional playback panel for pure audio content.

Use cases: Music streaming pages, podcast platforms, audiobooks, radio.

What you see:

• Spinning vinyl cover: Automatically generates a vinyl record effect from the album cover, slowly rotating (~20s per revolution) during playback, stopping on pause — like a real turntable
• Line-by-line scrolling lyrics: Supports LRC format; the current line is highlighted, enlarged, and auto-centered. Click any lyric line to jump to that timestamp. Also supports word-level karaoke fill and translation sub-lines
• Animated spectrum: 6 visualizer styles — LED grid, retro tri-color bars, mountain waveform, horizontal bars, radial circular, mirror symmetric — making audio “visible”
• Theme skins: Auto-extracts dominant color from the cover, plus two preset skins: retro vintage (silver-blue neon green) and hi-fi classic (deep sea blue amber gold)
• System media keys: Control play/pause/next/prev from the lock screen even when the phone screen is off
• Frosted glass background: Cover image blurred and enlarged as ambient backdrop

Two panel styles:

• panel: 'full' (default): large cover + lyrics + spectrum + frosted glass — for focused listening
• panel: 'bar': compact bottom info bar (cover + title + progress) — for embedded scenarios

new ZWPlayer({
  playerElm: 'player',
  url: 'song.mp3',
  mode: 'music',
  lyrics: 'song.lrc',
  music: {
    panel: 'full',
    visualizer: 'classic',
    theme: 'auto'
  }
});

Mixed Playlists: Auto-switching Between Video and Audio

This is of the most elegant capabilities in v3.3.2. When a playlist contains both video and audio items (e.g., a course: intro video + theme song audio + lecture video), the player automatically detects the current content type and switches the playback form:

• Playing a video → standard video playback form
• Playing audio → auto-switches to music panel (cover + lyrics + spectrum)
• Switching from audio back to video → auto-switches back to standard form

The entire process is fully automatic and transparent to the user — the player knows whether it’s playing video or audio and presents the most appropriate interface.

3. Subtitle Search: From “Within Video” to “Across the Entire Series”

The Pain Point

Ever heard a classic line of dialogue while binge-watching and couldn’t remember which episode it was from? Or wanted to find the video segment where a teacher covered a specific topic, but had to go through episodes by one?

v3.3.2’s cross-video subtitle search is built to solve exactly this problem.

In-Group Search

Search subtitles by keyword across all videos in the same playlist group. Results are grouped by video — click any result to jump directly to that video’s timestamp.

Cross-Video Search: Find That Line Instantly ⭐

This is the headline feature of this release. Search subtitles across playlist groups to instantly locate which episode a line of dialogue appears in, at what timestamp:

How it works:

1. Type a keyword in the search box
2. The player searches all videos’ subtitles in the background simultaneously
3. Results are grouped by video, each clearly labeled: which episode, what time
4. Click any result — the player auto-switches to that video and seeks to the exact dialogue timestamp

Use cases:

• TV series recall: Search dialogue to locate the episode — ten times faster than browsing episode lists
• Course study: Search a concept to find the video segment where it was discussed
• Language learning: Search example sentences and replay the original pronunciation
• Meeting recordings: Search spoken content to jump to the relevant recording segment

Subtitle Segment Fine-tuning

Once you’ve found the target subtitle, fine-tune the segment:

• Subtitle loop: Replay the same subtitle segment on repeat — a language learner’s best friend
• A-B segment loop: Custom start/end points for repeated playback
• Progress bar selection: Visually select a segment range on the progress bar

4. DASH Embedded Subtitle Pre-Download: Search, Translate, and Export DASH Subtitles

Since v3.3.0, ZWPlayer has automatically pre-downloaded embedded HLS subtitles (assembling segmented tracks into complete files so search, translation, and export all work). v3.3.2 brings the same capability to DASH: when playing a DASH stream, the player automatically resolves every embedded subtitle track declared in the MPD manifest, pre-downloads them concurrently, and parses them into complete subtitles inside the ZWPlayer subtitle system.

Why it matters: most mainstream packagers (Shaka Packager, Axinom, etc.) wrap DASH subtitles inside mp4 containers (stpp/TTML or wvtt/WebVTT). Browsers and the dash.js engine can display them segment by segment — no full-text search, no translation, no export. Pre-download makes all of these available on DASH streams too.

Coverage (mainstream packager output):

• mp4-container text tracks: stpp (TTML-in-mp4) and wvtt (WebVTT-in-mp4), via both segmented (.m4s + SegmentTemplate/SegmentList) and single-file (SegmentBase) addressing
• Bare text tracks: WebVTT / TTML sidecars, segmented or single-file
• Dual-encoding dedup: when the same language provides both wvtt and stpp tracks with identical content, entry is kept (wvtt preferred — shorter parse chain, smaller downloads), so the subtitle list stays clean
• Streaming: cues become usable while segments download concurrently; in-flight fetches are invalidated automatically on source switch; live streams (dynamic MPD) are not preloaded

Zero config: this capability is on by default — just play a DASH stream and it works, no settings required.

new ZWPlayer({
  playerElm: 'player',
  url: 'https://example.com/stream.mpd'
});

5. Refinements & Fixes

Auto Poster: No More Black First Frame

Videos without a configured poster used to greet visitors with a black rectangle. Starting from v3.3.2, the player automatically uses the video’s first frame as the poster:

• Local files: the first frame is extracted in the background to generate a poster image (with bounded concurrency, so page performance is unaffected) — every local video in the playlist gets its own cover
• HTTP VOD videos (MP4, etc.): native browser first-frame rendering is activated, working on iOS/Safari as well

Streamlined Mobile Control Bar

On touch devices, an on-screen volume slider adds little value — phone volume is controlled by the hardware volume keys. v3.3.2 hides the on-screen volume button on mobile, making the control bar shorter and cleaner, leaving room for the controls that matter.

Fixes

General stability and compatibility fixes.

6. Configuration Overview

Upgrade

Replace the zwplayer.js file — fully backward compatible. Omitting mode defaults to 'standard'; all new features are off by default. Existing projects will see zero behavior change.

📥 Download v3.3.2: https://cdn.zwplayer.com/v3.3.2/zwplayer.zip

Closing Thoughts

v3.3.2 is an important step toward making ZWPlayer a “universal media playback platform.” Bumper ads give the player commercial closure capabilities, playback modes let player adapt to scenarios from video to audio to card previews, cross-video subtitle search breaks content retrieval beyond the boundary of a single video, and DASH embedded subtitle pre-download brings subtitle capabilities into full parity across the two mainstream streaming protocols.

We look forward to seeing these new capabilities in your projects. If you have any feedback or suggestions, feel free to reach out via GitHub Issues or our community channels.