ZWPlayer v3.3.2 Released: Ads, Music & 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, DASH embedded subtitles made fully usable, and a UI language unified from desktop to mobile.

This update revolves around five major directions: ad monetization, playback modes, deep subtitle search, DASH subtitle pre-download, and a unified UI overhaul. The first four widen the player’s capabilities; the last wraps them in a modern, consistent, and pleasant interface. 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. Unified Player UI: Design Language, Desktop to Mobile

More features shouldn’t mean a messier interface. In the second half of v3.3.2, we completed a unified UI redesign of the player — bringing the control bar, settings menu, progress bar, and popovers into consistent modern style, on desktop and mobile alike.

A More Modern Control Bar

• Lighter and smoother: show/hide transitions are gentler, auto-hide is faster (4s on desktop / 3s on mobile), and the bar no longer hides while paused — the button you need is always there
• Progress bar, thumb, and time bubble all refreshed for a more consistent look

The Settings Menu Becomes “Home → Sub-pages”

• Common settings like speed and quality are grouped into the gear menu instead of scattered around
• The home page shows current values: “Speed ▸ 1.0x”, “Quality ▸ Auto” — visible at a glance, click to change
• Action features (screenshot, cast, PiP, etc.) appear as tiles — click to use

6. Pull-up Thumbnail Strip: Locate Any Frame Quickly

Trying to find a specific moment in a 40-minute video by scrubbing back and forth is painful. Now, whenever thumbnails are configured, press and hold the progress bar and pull up to expand a full-width thumbnail strip:

• While pulling up, the video dims and the thumbnail brightens — your attention naturally focuses on the picture
• A white needle aligns with the current position; browse the strip frame by frame at your leisure, or click the target frame to jump
• Made a mistake? ✕ or Esc cancels and returns to the original position

Desktop mouse and touch gestures work identically.

7. Keyboard Shortcuts: Percentage Seeking with Number Keys

• Press number keys 1–9 to jump to 10%–90% of the video: 1 is 10%, 5 is the midpoint, 9 is 90% (VOD only)
• Press 0 to replay from the beginning
• The volume slider supports mouse-wheel adjustment — no more precise aiming at a tiny slider
• The in-player shortcut help panel has been updated accordingly

8. Mobile: Bottom Sheets and a Folding Control Bar

Mobile is not a shrunken desktop — this time it got dedicated treatment:

• Bottom sheets: the settings menu, subtitle search, and other panels now slide up from the bottom, with larger rows and switches for comfortable touch interaction
• The “‹›” folding button: on small screens, secondary buttons (playlist, annotations, chapters, screenshot) are stowed into a folding group — tap to expand, keeping primary controls uncluttered
• A cleaner control bar: the on-screen volume button is hidden on touch devices (phone volume is controlled by the hardware keys), leaving room for the controls that matter
• Fixed menu display issues on tablets such as the iPad

9. Chapters & Annotations: A Table of Contents on the Progress Bar

• Clearer chapter segmentation: chapters appear as divider gaps on the progress bar — like the separators of a book’s table of contents — keeping playback progress clear at a glance
• Richer hover info: hovering the progress bar shows the thumbnail, time, chapter title, and nearby annotation info together, neatly arranged
• Clickable annotation marks: annotation marks (quiz, info card, vote, etc.) are more visible — click to jump to its moment

10. 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 — 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

Subtitle Free Dragging

Subtitles can be dragged anywhere on the picture (horizontally and vertically) to find the most comfortable reading position; positions adapt to window resize and fullscreen, and avoid the control bar.

Other Details

• Progress hover time tooltip on by default

Fixes

General stability and compatibility fixes.

11. Configuration Overview

Upgrade

Replace the zwplayer.js file — the API and data formats are fully backward compatible.

Note that the UI redesign changes some default visual behaviors (faster control bar auto-hide, no hiding while paused, hover tooltip on by default); adjust them via hideControlbarTimeout, useProgressTooltip, and related options if needed.

📥 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. The unified UI redesign then wraps all of this in a modern, consistent skin that works the same from desktop to mobile.

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.