Interactive Video Player & Tools | ZWPlayer - ZWPlayer
中文
v3.3.0<br>Interactive & Powerful Web Video Player
Zero Web Player
More than a player, it's a full video workflow. With a plugin-free WebRTC/RTSP core and 8 visual tools, developers can easily build secure, interactive enterprise video apps.
WebRTC<br>RTSP Plugin-Free<br>ZWMAP Interactive
🛠️ Visual Toolchain: 7 WYSIWYG online editors for annotations, watermarks, and more. Export code instantly.
🚀 Cross-Framework Ecosystem: Lightweight pure JS core, natively adapted for Vue/React, and deep WordPress/Zibll integration.
🛡️ DRM & High-Conversion: Dynamic watermarks prevent screen recording; ZWMAP empowers immersive teaching and marketing.
🚀 Get Started<br>📺 Live Demo
CDN / Vanilla JS<br>NPM / Vue<br>NPM / React
src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js">
const player = new ZWPlayer({<br>playerElm: '#mse',<br>url: 'https://example.com/test.m3u8',// Smart detection for TRTC/ARTC/RTSP/HLS<br>annotations: 'annotation.json', // Two-way interactive quizzes, forms & branches<br>watermarks: 'watermark.json', // Millisecond anti-recording dynamic watermark<br>localPlayback: true // Enable offline local file drag-and-drop parsing<br>});
# Install Vue 3 component package<br>npm install zwplayervue3
// Vue SFC declarative usage, out of the box
ref="zwplayerRef" :fluid="true"<br>url="https://example.com/test.m3u8"<br>annotations='annotation.json'<br>watermarks='watermark.json' />
setup><br>import { ref } from 'vue'<br>import { zwplayer } from 'zwplayervue3'<br>const zwplayerRef = ref(null)
# Install React component package<br>npm install zwplayer-react
// React component declarative usage<br>import React, { useRef } from 'react';<br>import { ZwPlayer } from 'zwplayer-react';
export function DemoZwplayer() {<br>return (<br>style={{ padding: '5px', width: '100%', margin: '0 auto' }}>
ref={useRef(null)}<br>fluid={true}<br>url="https://example.com/test.m3u8"<br>annotations="annotation.json"<br>watermarks="watermark.json"<br>/>
);
Why Choose ZWPlayer?
Unified Protocol Architecture
Separate plugins for HLS/DASH/FLV, complex multi-protocol mixing, prone to conflicts
Unified interface with smart stream type detection. Seamlessly mix multiple protocols on a single page.
Deep WebRTC Integration
Protocol fragmentation, standard WHEP vs proprietary (TRTC/ARTC) often requires multiple heavy SDKs
Official built-in support for WHEP, Aliyun ARTC, Tencent TRTC, and BRTC. Achieve ultra-low latency live streaming with a single instance.
RTSP Plugin-Free Direct Connect
Browser native unsupported, traditional solutions rely on resource-heavy plugins with complex configuration
Lightweight media gateway enables zero-plugin browser preview. Security streams open instantly without transcoding.
Next-Gen Codec Support
Outdated core, lacking H.265 (HEVC), fMP4, CMAF and other efficient codec/container support
Rapid core evolution, supporting LL-HLS, AV1 and other cutting-edge standards.
ZWMAP Unified Data Protocol
Fragmented data formats for different modules make it difficult to integrate visual editors and sync across platforms
Built-in ZWMAP standard. A single JSON spec drives playlists, subtitles, thumbnails, watermarks, and annotations. Out-of-the-box integration with online visual editors.
Enterprise Framework Integration & Isolation
Tedious to wrap in React/Vue; easily broken by global CSS pollution in complex CMS like WordPress
Seamless integration with React, Vue 2/3. Native WordPress plugin features sandbox-level style isolation, effectively immune to global pollution.
Powerful Interactive Video
Expand the boundaries of one-way viewing. Built-in interactive annotation engine supports quizzes, forms, branching, voting, Webview , and 13 dynamic nodes. Combine session variables and custom animations to create immersive interactive teaching and high-converting marketing videos.
Interactive Video?
A. YesB. Definitely
Full-format Knowledge Search & Local Drag-and-Drop
Fully compatible with VTT, SRT, BCC, and JSON chapters , featuring convenient local file drag-and-drop loading . The powerful built-in engine provides clear progress bar guidance and real-time full-text search, making every line of dialogue a precise navigation point.
Subtitle Search
🔍<br>hard
24:09 → 24:11
Could it be hard for you
37:10 → 37:15
It's really hard to master
37:17 → 37:19
No matter how hard, I'll learn
3 results found
Strict Privacy & Deep Control Experience
Respecting your experience. Supports localPlayback for pure front-end offline parsing of local videos , ensuring high privacy security. Aligns with short-video Apps on mobile, featuring long-press 2x speed and smart WeChat autoplay fallback. Equipped with real-time Magnifier, AirPlay/Cast, and 4x volume boost.
🔒 Local Parse (No Upload)
⏩ 2.0X
Enterprise Watermark & Anti-Screen Recording
Safeguard your digital assets. In addition to static logos, we provide millisecond-rendered dynamic marquee watermarks and full-screen tile watermarks. Seamlessly embed {sys_time} and...