Enterprise-grade WebRTC / RTSP / HLS Player with 8 Zero-Code Online Tools
-brightgreen.svg){kind=icon}
ZWPlayer is an enterprise-grade interactive HTML5 video player and a comprehensive audiovisual ecosystem. With its plugin-free, ultra-fast core, it supports WebRTC ultra-low latency live streaming, plugin-free RTSP monitoring, and standard HLS/DASH/FLV formats. Powered by the proprietary ZWMAP engine, developers can easily build highly interactive and secure cross-platform video applications.
This repository (zwplayer-release) is dedicated to distributing the compiled artifacts (minified JS, CSS, and plugins) of ZWPlayer. It contains no source code and acts primarily as a CDN hub.
- ⚡️ Unified Protocol Architecture: Seamlessly mix WebRTC (WHEP/ARTC/TRTC), RTSP, HLS, DASH, and FLV playback natively in the browser.
- 🛡️ Enterprise DRM & Anti-Screen Recording: Built-in dynamic marquee and tile watermarks with millisecond real-time rendering. Inject custom user data for precise leak tracing.
- 💡 Interactive Video Elements: Move beyond one-way viewing. Overlay quizzes, forms, branching choices, and 13 other dynamic nodes directly onto your videos.
- 🧩 Cross-Framework Support: Written in pure vanilla JS with official wrappings for Vue 2/3 and React, featuring robust CSS isolation.
- 🔍 Smart Multi-Track Subtitles & Real-Time API Translation: An innovative HLS embedded-subtitle pre-download & extraction technique seamlessly fuses with SRT/VTT/BCC external tracks (multi-track loading, free primary/secondary assignment); natively connects to a translation API for dynamic bilingual display, with global seamless indexing for instant dialogue seeking; per-track runtime styling and per-result loop — perfectly empowering language learning, paid knowledge content, and global go-to-market scenarios.
To minimize integration barriers, ZWPlayer offers 8 out-of-the-box, zero-code visual online tools:
- 📺 Online Video Player: A full-featured testbed for any protocol, including drag-and-drop local playback, PiP, and casting.
- ⚙️ Code Generator: Visually configure player parameters and instantly export ready-to-use HTML, Vue, or React snippets.
- 🎯 Annotation Editor: Drag and drop interactive hotspots, quizzes, and forms over your video timeline.
- 📝 Subtitle Editor: Create and fine-tune VTT/SRT subtitles with a bilingual interface and precise timeline alignment.
- 📑 Chapter Editor: Visually segment long videos to auto-generate progress bar chapter markers and navigation menus.
- 🖼️ Thumbnail Generator: Extract keyframes entirely in the browser and automatically synthesize sprite sheets for progress bar previews.
- 📋 Playlist Editor: Build hierarchical JSON playlists ideal for online courses, TV series, or IPTV.
- 💧 Watermark Editor: WYSIWYG configuration for static logos and dynamic anti-recording marquee watermarks.
ZWPlayer ships official component packages for seamless integration with popular frameworks and CMS:
| Framework / Platform | NPM Package | Install | GitHub Demo | Gitee Demo |
|---|---|---|---|---|
| Vue 2 | zwplayer-vue2x |
npm install zwplayer-vue2x --save |
GitHub | Gitee |
| Vue 3 | zwplayervue3 |
npm install zwplayervue3 --save |
GitHub | Gitee |
| React | zwplayer-react |
npm i zwplayer-react --save |
GitHub | Gitee |
| WordPress | — | WordPress Plugin Directory | — | — |
Quick Example:
// Vue 2 / Vue 3
import { zwplayer } from 'zwplayer-vue2x' // or 'zwplayervue3'
// React (supports React 16.8+ / 17 / 18 / 19)
import { ZwPlayer } from 'zwplayer-react'WordPress — install ZW Player Video Embed directly from the plugin directory. Supports Gutenberg block, classic editor button, and [zwplviem] shortcode:
[zwplviem url="https://example.com/video.mp4" autoplay="true"]
Covers HLS, DASH, FLV, WebRTC, RTSP live streaming, dual subtitles, chapters, watermark, and more. See the WordPress integration guide for details.
You can easily load ZWPlayer's compiled assets directly via our official CDN:
<script src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>(Alternatively, since this repository is public, it is also automatically mirrored and served globally via public open-source CDNs like jsDelivr)
Please visit the official documentation for the latest builds and integration guides.
- 📖 Official Site & Documentation: https://www.zwplayer.com/
ZWPlayer 不仅仅是一个纯前端网页播放器，更是为企业量身定制的全链路视音频交互工作流。基于免插件的极速内核，支持 WebRTC 超低延迟直播、RTSP 免插件安防监控以及标准 HLS/DASH/FLV 点播流。凭借独创的 ZWMAP 统一交互数据协议，开发者能以极低门槛打造高互动、强安全、多端的视频应用。
本仓库 (zwplayer-release) 专用于分发 ZWPlayer 核心构建产物（包含混淆压缩后的 .js、.css 以及各类插件）。本库不含源码，主要作为 CDN 分发中心。
- ⚡️ 全流媒体协议融合：单页面无缝混播 WebRTC (支持 WHEP/ARTC/TRTC)、RTSP (免插件直连)、HLS、DASH 和 FLV。
- 🛡️ 企业级防盗防录屏：内置动态跑马灯水印 (Marquee Watermark) 与全屏平铺水印，毫秒级实时渲染，支持注入自定义用户信息以进行精准防录屏溯源。
- 💡 双向交互式视频体验：突破单向观看！原生支持在视频内叠加测验题、表单、分支选项、网页嵌入等 13 种动态节点。
- 🧩 现代框架原生适配：采用纯 JavaScript 编写，原生提供 Vue 2/3 与 React 组件接入方式，彻底解决样式污染。
- 🔍 智能多轨字幕与实时 API 翻译：创新引入 HLS 内嵌字幕预下载提取技术，无缝融合 SRT/VTT/BCC 外挂字幕（多轨加载、主/副轨自由分配）；原生对接翻译 API 实现动态双语，配合全局无感索引定位台词秒级跳转；逐轨运行时样式调节与逐条循环——完美赋能外语学习、知识付费与跨国出海场景。
为了极大降低集成和开发成本，ZWPlayer 官方配备了 8 款免安装、即开即用的在线可视化编辑器：
- 📺 在线全能播放器：支持所有格式的在线试播、本地文件免上传拖拽播放，含弹幕、倍速、投屏、画中画测试。
- ⚙️ 代码生成器：可视化调节播放器几百种参数，实时预览，一键导出可用的 HTML / Vue / React 接入代码。
- 🎯 交互标注编辑器 (Annotation Editor)：无需写代码，拖拽式设计视频内的测验、投票、热区，一键导出交互配置。
- 📝 字幕编辑器 (Subtitle Editor)：在线制作和微调多语种外挂字幕，支持双语对照与时间轴高精度对齐。
- 📑 章节编辑器 (Chapter Editor)：为长视频打点分章，自动生成播放进度条上的彩色标记及导航目录。
- 🖼️ 缩略图生成器 (Thumbnail Generator)：纯前端无损提取视频关键帧，一键合成进度条预览所需的雪碧图 (Sprite Sheet)。
- 📋 双级播放列表编辑器 (Playlist Editor)：可视化构建带有层级目录的剧集或课程列表，完美适配网课及 IPTV 场景。
- 💧 水印编辑器 (Watermark Editor)：所见即所得地调整防录屏跑马灯、静态 Logo 的大小与透明度。
ZWPlayer 提供官方框架组件包，可无缝集成到主流前端框架和 CMS 中：
| 框架 / 平台 | NPM 包名 | 安装命令 | GitHub 示例 | Gitee 示例 |
|---|---|---|---|---|
| Vue 2 | zwplayer-vue2x |
npm install zwplayer-vue2x --save |
GitHub | Gitee |
| Vue 3 | zwplayervue3 |
npm install zwplayervue3 --save |
GitHub | Gitee |
| React | zwplayer-react |
npm i zwplayer-react --save |
GitHub | Gitee |
| WordPress | — | WordPress 插件目录 | — | — |
快速示例：
// Vue 2 / Vue 3
import { zwplayer } from 'zwplayer-vue2x' // 或 'zwplayervue3'
// React (支持 React 16.8+ / 17 / 18 / 19)
import { ZwPlayer } from 'zwplayer-react'WordPress — 直接在插件市场安装 ZW Player Video Embed，支持 Gutenberg 区块编辑器、经典编辑器按钮及 [zwplviem] 短代码：
[zwplviem url="https://example.com/video.mp4" autoplay="true"]
覆盖 HLS、DASH、FLV、WebRTC、RTSP 直播流、双字幕、章节、水印等全部功能。详情参阅 WordPress 集成文档。
你可以直接通过官方专属 CDN 获取最新的构建资源：
<script src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>(如果你更倾向于使用免费的开源镜像加速，本仓库也会通过 GitHub 自动同步到 jsDelivr 等公共 CDN 节点)
请前往 官方文档 获取最新版本的更多接入指引。
- 📖 官方文档与演示：https://www.zwplayer.com/zh