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.
- 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.
<!-- Minimal setup for deep experience & commercial interactive engine -->
<script src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
<script>
const player = new ZWPlayer({
playerElm: '#mse',
url: 'https://example.com/test.m3u8',// Smart detection for TRTC/ARTC/RTSP/HLS
annotations: 'annotation.json', // Two-way interactive quizzes, forms & branches
watermarks: 'watermark.json', // Millisecond anti-recording dynamic watermark
localPlayback: true // Enable offline local file drag-and-drop parsing
});
</script># Install Vue 3 component package
npm install zwplayervue3
// Vue SFC declarative usage, out of the box
<template>
<zwplayer ref="zwplayerRef" :fluid="true"
url="https://example.com/test.m3u8"
annotations='annotation.json'
watermarks='watermark.json' />
</template>
<script setup>
import { ref } from 'vue'
import { zwplayer } from 'zwplayervue3'
const zwplayerRef = ref(null)
</script># Install React component package
npm install zwplayer-react
// React component declarative usage
import React, { useRef } from 'react';
import { ZwPlayer } from 'zwplayer-react';
export function DemoZwplayer() {
return (
<div style={{ padding: '5px', width: '100%', margin: '0 auto' }}>
<ZwPlayer
ref={useRef(null)}
fluid={true}
url="https://example.com/test.m3u8"
annotations="annotation.json"
watermarks="watermark.json"
/>
</div>
);
}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.
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.
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.
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 custom user variables for precise anti-screen recording tracking on every frame.
Smart Dual-Level Playlist
Built-in grouped dual-level playlist panel with linked category navigation and episode browsing. Features one-click favorites, play history tracking, and real-time search filtering. Combined with an "Up Next" preview queue, effortlessly manage hundreds of videos for TV series, IPTV channels, and course collections.
Comprehensive Online Tools Ecosystem
Online Player
Full-protocol online preview supporting HLS, DASH, FLV, and WebRTC with drag-and-drop local files, built-in danmaku, subtitles, and speed control.
Code Generator
Zero-code visual configuration with real-time preview. One-click export of production-ready HTML/JS embed code for rapid integration.
Annotation Editor
Visually design interactive video hotspots with drag-and-drop. Configure quizzes, forms, and branching across 13 ZWMAP dynamic nodes with instant preview and JSON export.
Subtitle Editor
Create and edit VTT, SRT, and BCC subtitles online with bilingual layout, timeline fine-tuning, and real-time synchronized preview.
Chapter Editor
Visually segment long videos into chapters with auto-generated progress bar markers and table-of-contents navigation for improved content discovery.
Thumbnail Generator
Extract key video frames entirely in-browser, auto-generate sprite sheets for precise progress bar hover previews.
Playlist Editor
Visually build grouped dual-level playlist JSON data with drag-and-drop sorting, batch import, and live preview integration.
Watermark Editor
WYSIWYG configuration for static logos and dynamic anti-recording marquee watermarks with macro variable injection and one-click parameter export.
Omnipotent Audiovisual Matrix
More than playback, it's an enterprise video ecosystem foundation.
Dual Parallel Subtitles
Render two subtitle tracks of different formats and languages simultaneously. Supports real-time drag-and-drop loading and global style customization.
A-B Segment Loop
Select progress points A and B for infinite seamless looping.
Force Lock Mode
Disable all progress dragging and volume control. Auto-pause on window blur.
High-Concurrency Danmaku
No need to build complex canvas code. Built-in powerful danmaku rendering engine with anti-overlap, opacity control, and custom styling to handle massive concurrency.
Real-time Manipulation
Flip, rotate, and adjust brightness/contrast entirely on the frontend. Supports lossless frame capturing and downloading.
4x Volume Boost
Break browser volume limits to natively amplify quiet audio sources.
Sprite Thumbnails
Hover over the progress bar for an instant visual frame preview.
PiP & Floating Mini-Window
Features system-native Picture-in-Picture (PiP) and smooth in-page floating mini-windows. Drag, resize, and switch seamlessly to maintain uninterrupted playback while multitasking.
Lossless Audio & Video Cropping
No heavy post-processing software needed. Select and crop video segments or independent audio tracks directly in the browser. Export instantly to boost creator workflow efficiency.
Smart Autoplay Policy
Deeply adapted for WeChat and mobile. Smoothly falls back to muted autoplay or visual guides when restricted.
Global Shortcut Keys
Geek-level keyboard interactions. Control playback, volume, and frame-stepping with rich combinations.
FAQ
Why is ZWPlayer advantageous for WebRTC playback?
ZWPlayer natively supports standard WHEP and deeply integrates proprietary protocols from major cloud providers like Alibaba ARTC and Tencent TRTC. Developers don't need heavy third-party SDKs to achieve cross-platform ultra-low latency (< 400ms) live streaming.
How does it support RTSP security cameras?
Traditional RTSP requires complex browser plugins. ZWPlayer offers a modern WebSocket-based solution. By utilizing a lightweight media gateway, you can achieve millisecond-level decoding and preview of RTSP/RTMP streams directly in the browser, perfect for plugin-free security and IoT monitoring.
How to add interactive quizzes or anti-recording watermarks?
With the built-in ZWMAP engine, simply configure a JSON file to overlay interactive forms, quizzes, or dynamic anti-recording watermarks. We also provide online visual editors to simplify the configuration process.
Can it be used in enterprise intranets or offline environments?
Fully supported. The core library can be deployed locally, and it features a 'localPlayback' mode for pure front-end offline parsing. Drag and drop local videos without server interaction, ensuring data privacy.