ZWPlayer v3.3.0 Released: From Player to Interactive Video Ecosystem, 9 Core Capabilities Upgraded

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

This is a major milestone release for the ZWPlayer v3.x series. If we were to summarize the core of this update in a single sentence:

We are upgrading ZWPlayer from a simple “video player” into a “video interaction ecosystem.”

This update revolves around two major directions: the video tool ecosystem and interactive video capabilities. It introduces the unified data protocol ZWMAP, six core tool modules with corresponding online visual editors, and experience enhancements such as a magnifying glass and screen casting.

Let’s dive into the nine core upgrades brought by v3.3.0.

💡 Get the Latest Version: In addition to the download links at the bottom, you can obtain the latest build artifacts (including offline ZIP packages and JS files) from our release repositories:

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

1. ZWMAP Unified Data Protocol — One Specification to Connect All Capabilities

We have introduced the brand-new ZWMAP/1.0 (ZWPlayer Media Application Protocol), which defines a unified JSON data exchange specification for six modules: thumbnails, subtitles, chapters, playlists, annotations, and watermarks.

What does this mean?

• All data generated by the online editors adheres to the same protocol and can be loaded directly in the player.
• A unified protocol header (zwp_protocol / zwp_type / zwp_version) automatically identifies the data type without manual configuration.
• Subtitle and chapter formats are fully backward-compatible, enabling seamless migration of legacy data.
• Designed with version control to allow for future protocol evolution.

💡 In simple terms, ZWMAP is like the “common language” within the ZWPlayer ecosystem, enabling all modules to communicate seamlessly and form a closed-loop toolchain.

2. Annotation System — Turning Video from “One-Way Playback” into “Two-Way Interaction”

This is the most ground-breaking feature in v3.3.0. The annotation system supports overlaying 13 interactive node types on the video timeline:

Key Feature Highlights:

• Three-stage Animation System: Supports 18 entering, resident, and exiting animation effects.
• Color-coded Progress Bar: Visualizes the distribution of interactive nodes along the timeline.
• Event-driven Action Chains: Interlink nodes to create complex interactive workflows.
• Education-focused Features: Skip-prevention, pause-on-trigger, and session variable systems.
• Supporting Online Annotation Editor: Visual timeline editing with one-click ZWMAP JSON export.

🎓 Application Scenarios: Online education (in-video quizzes), interactive marketing (branching stories), corporate training (compliance testing), and data collection (embedded forms).

3. Watermark System — Brand, Copyright, and Anti-Recording in One

The watermark system covers three core video security scenarios:

Key Highlights:

• Supports both image watermarks and text watermarks.
• Three behavior modes: Static, Dynamic (randomly moving to prevent screen recording), and Tiled (densely covering the entire screen).
• Text watermarks support template variables such as {user_name} and {sys_time}, which are dynamically replaced at runtime.
• Fully backward-compatible with legacy logo parameters.
• Supporting WYSIWYG Online Watermark Editor for what-you-see-is-what-you-get configuration.

🔐 A must-have capability for knowledge payment, corporate training, and secure internal documentation playback.

4. Fully Matured Tool Ecosystem

v3.3.0 turns ZWPlayer into a complete playback ecosystem with built-in productivity tools:

• 📸 Thumbnails
  • Hover previews on the progress bar, loaded efficiently using image sprites.
  • Supporting Online Thumbnail Generator.
• 📑 Chapter Navigation
  • Section-based video navigation supporting JSON / VTT formats.
  • Color-coded chapter markers on the progress bar with a built-in search panel.
  • Supporting Online Chapter Editor.

Every tool module features a visual online editor. The generated data conforms to the ZWMAP protocol and can be loaded directly into the player, achieving a complete “edit → export → play” workflow.

5. Subtitle System Upgrade — From Bilingual Display to Intelligent Subtitle Management

Subtitles in v3.3.0 have evolved from basic dual-language rendering into a comprehensive subtitle management and interaction system.

• 🎬 Multi-track Subtitles
  • Breaks the previous dual-subtitle limit to support loading multiple subtitle files with customizable primary/secondary tracks.
  • Ideal for multi-language films, foreign language learning, and localization.
• 🌍 Built-in Subtitle Translation
  • Built-in translation panel supporting 13 target languages.
  • Translation results are overlayed in real time as secondary subtitles, eliminating the need for offline translation.
• 📡 HLS Embedded Subtitle Pre-building
  • Automatically pre-downloads Closed Caption tracks transmitted in HLS segment streams.
  • Merges segments into a complete subtitle file, enabling full-text search, translation, and export.
  • Solves the industry challenge of not being able to perform holistic operations on HLS embedded captions.
• 🎨 Custom Subtitle Styling
  • Adjust subtitle font size, color, stroke, position, background opacity, and more at runtime.
  • Primary and secondary subtitles can be configured independently.
• 🔁 Subtitle Looping
  • Loop playback of specific subtitle segment ranges directly from the search results.
  • A powerful tool for language learning and listening practice.
• Supporting Online Subtitle Editor: Create, translate, run AI voice-to-text recognition, and export to multiple formats.

6. Playlists — The Perfect Solution for Course Series and Video Albums

Designed for continuous playback scenarios like course series, video albums, and multi-episode content, the playlist system provides complete management and playback control.

• Data Structure
  • Multi-level grouping (Group → Item) based on the ZWMAP protocol.
  • Each item supports independent configuration of video URLs, covers, subtitles, chapters, thumbnails, annotations, and watermarks.
  • One dataset powers all features.
• Intelligent Playback Management
  • ✅ Automatically remembers playback progress for each video, resuming where the user left off.
  • ✅ Auto-plays the next video when the current one ends (configurable).
  • ✅ Auto-skips to the next video if a playback error occurs, avoiding interruption.
  • ✅ Prev/Next navigation support with seamless transitions across groups.
• Rich Playlist Interactions
  • ⭐ Favorites and playback history with persistent local storage.
  • 🔍 Real-time search with keyword highlighting.
  • 📐 Dual-column and responsive single-column layouts.
  • 📺 “Up Next” preview panel.
• Supporting Online Playlist Editor: Visually edit groups and items, import/export ZWMAP JSON, or paste XML formats for auto-conversion.

7. User Experience Enhancements — Magnifier & Screen Cast

• 🔍 Magnifier
  • Canvas-based circular magnifying glass.
  • Supports 7 zoom levels from 1.5x to 4x.
  • Toggle instantly with the Z hotkey to inspect fine details in the video.
• 📺 Screen Casting
  • Supports Google Cast and AirPlay.
  • Built on native browser APIs, requiring no extra plugins.
  • Features timeout protection and state recovery, allowing you to cast to the big screen with a single click.

8. Framework & Platform Ecosystem — Vue, React, and WordPress All Updated

v3.3.0 is not just a core player update — the supporting framework components and CMS plugins have all been updated in lockstep.

Front-End Framework Support

• Vue 2 / Vue 3: The zwplayervue3 npm package has been updated, fully supporting all new features of v3.3.0.
• React: Added official support, allowing fast integration using useRef + useEffect without an extra wrapper layer.
• ZWPlayer is built using the UMD module format, making it natively compatible with CommonJS, AMD, and global variables.

WordPress Plugin Major Upgrade

The WordPress plugin zw-player-video-embed has been upgraded to v3.3.0, allowing you to use all these new features in WordPress with zero coding!

ZWMAP data (such as chapters, thumbnails, watermarks, annotations, and playlists) generated by the online tools can be loaded directly through Gutenberg blocks or shortcode attributes. The workflow is simplified to:

Create data in the online editors → Export ZWMAP JSON → Configure WordPress attributes → Publish

No coding required. For educational institutions, corporate training portals, and knowledge-payment websites built on WordPress, this is a massive productivity boost. You can publish professional videos with navigation chapters, anti-recording watermarks, interactive quizzes, and playlists as easily as writing a blog post.

• 🔌 WordPress.org Plugin Page: zw-player-video-embed
• 🔌 WordPress Plugin ZIP Download: zw-player-video-embed.zip

9. Configuration Enhancements

Multiple configuration properties have been added to give developers fine-grained control:

Additionally, property names for modules support singular/plural normalization (e.g., both chapter and chapters are recognized), reducing developer integration overhead.

Upgrade and Experience

💡 Upgrade Path: Simply replace the zwplayer.js file. The SDK is fully backward-compatible, and all new features are disabled by default to prevent affecting existing business logic.

• 📥 SDK Download: zwplayer.zip
• 📺 Online Demo: ZWPlayer Online Player
• 📚 Documentation: Help & Support
• 🔌 WordPress Plugin: WordPress Plugin Directory
• 🐱 GitHub Releases: GitHub Releases Page
• 🐼 Gitee Releases: Gitee Releases Page

Conclusion

ZWPlayer v3.3.0 represents a major step forward toward an interactive video ecosystem. From the unified ZWMAP protocol, to core modules like annotations, watermarks, subtitles, and playlists, to their online visual editors, and framework/WordPress integration — we remain dedicated to our core philosophy:

Enable developers to escape the complex technical details of streaming media, and focus their energy entirely on business logic and user experience innovation.

ZWPlayer — Making video playback simpler, and business conversions more efficient! 🚀