爱意满满的作品展示区。
zwplayer

zwplayer:一款“智能傻瓜式”全协议 H5 播放器,让 Web 视频集成更简单

  •  
  •   zwplayer · Feb 6 · 1515 views
    This topic created in 137 days ago, the information mentioned may be changed or developed.

    各位 V 友,

    在开发 Web 视频应用时,大家是否遇到过这些“心累”的时刻:

    • 为了跑通 HLS 、DASH 、FLV ,不得不引入一堆不同的插件,甚至还要处理它们之间的冲突。
    • 面对 RTSP 监控流,在 Chrome 禁用 Flash 后,依然找不到轻量级的网页无插件播放方案。
    • 老板突然要求支持 WebRTC 低延时,还得去兼容阿里、腾讯、百度各家特色的协议。
    • 好不容易集成了播放器,发现截图、弹幕、画中画、倍速、甚至是音量增益等“基础功能”全都要自己手撸代码实现。

    为了彻底解决这些痛点,我们开发了 **zwplayer (Zero Web Player)**。 官网地址:https://www.zwplayer.cn

    🚀 为什么叫 Zero ?

    我们的核心目标是:将开发者的成本降至无限接近于零。 你不需要是流媒体专家,不需要了解各种协议的技术细节。你只需要给它一个地址,剩下的交给 zwplayer 内部的智能引擎。

    ✨ 核心亮点:

    1. **全协议通吃 (开箱即用)**:
    • 直播/点播:HLS, DASH, HTTP-FLV, WebSocket, HTTP-TS 等全覆盖。
    • 超低延时:深度集成 WebRTC (WHEP 标准),官方适配阿里云 ARTC 、腾讯云 TRTC 、百度云 BRTC ,端到端延迟低至 240ms
    • RTSP 网页直放:配合服务器端转发,实现在浏览器无需插件直接播放 RTSP 监控流。
    • 本地播放:支持直接加载用户本地视频文件进行播放。
    1. “傻瓜式”的集成体验
    • 无依赖:纯原生 JS 编写,不依赖第三方库 ,支持 Vue 2/3 。
    • API 永久固化:升级版本只需替换 JS 文件,不破坏现有业务代码。
    • WordPress 插件无缝集成:提供 WordPressZWPlayer播放器插件,无需编写代码,像插入图片一样即可调用。
    1. 内置“全家桶”级功能
    • 交互增强:内置弹幕系统、双语字幕渲染、字幕搜索、章节搜索、进度条预览缩略图。
    • 画面操控:支持亮度/对比度调节、画面多角度旋转、视频截图。
    • 特色业务AB 片段循环音量 4 倍增益实时录制/音频提取,以及专为在线教育设计的强锁禁控模式(失去焦点自动暂停)。
    1. 真正意义上的 0 成本
    • 完全免费:个人/商业用途均免费,无 License 限制,无广告,无联网后门。
    • 私网友好:不依赖 CDN ,内网/私有云环境解压即用。

    🔗 相关链接:

    欢迎各位 V 友试用并提出宝贵建议!如果你正被复杂的流媒体协议折磨,或者厌倦了反复造轮子写 UI ,zwplayer 也许能让你早点下班。

    应用截图: 界面截图.png

    Supplement 1  ·  21h 29m ago
    折腾了几个月,给 zwplayer 播放器加上了视频交互标注、防录屏水印、多轨字幕翻译等功能( ZWPlayer v3.3.0 )
    之前主要就是一个播放器,功能上偏"看"。这次 v3.3.0 花了不少时间,主要是想把它往"互动"的方向推一步。

    ---

    ## 这次更新了什么

    ### 1. 交互标注系统

    算是这次最大的功能。简单说就是可以在视频时间轴上叠加各种交互元素,一共支持 13 种类型:热区、按钮、文字、图片、选择题、测验、表单、投票、信息卡、网页嵌入、地图、倒计时、变速器。

    典型场景就是在线教育——视频播到某个知识点弹出一道选择题,答对了继续,答错了回退重看。企业培训的合规考核也是类似的需求。

    配了一个在线编辑器,可视化拖拽编辑,导出 JSON 丢给播放器就能用: https://www.zwplayer.com/zh/tools/annotation/

    ### 2. 水印系统

    三种模式:静态(固定位置)、动态(画面上随机移动,防录屏)、平铺(铺满画面)。支持图片水印和文字水印,文字水印可以用 `{user_name}`、`{sys_time}` 这种模板变量,运行时替换。

    主要是给知识付费和企业内训场景用的,录屏了也能追溯到人。

    在线编辑器: https://www.zwplayer.com/zh/tools/watermark/

    ### 3. 字幕大改

    之前只支持双字幕,现在改成多轨字幕了,可以加载多个字幕文件自由分配主副轨。

    几个比较实用的点:

    - 接入翻译 API 后可以实时翻译字幕,翻译结果直接叠加为副字幕显示,支持 13 种语言
    - HLS 流里的 Closed Captions 是分段传输的,之前没法整体操作。现在会自动预下载拼接成完整字幕,可以全文搜索、翻译和导出
    - 字幕循环:搜索到一条台词后可以按这条台词的时间区间循环播放,学外语跟读挺好用
    - 主副字幕样式独立配置(字号、颜色、描边、透明度等)

    ### 4. 播放列表

    多级分组结构,每个视频可以独立配字幕、章节、水印、标注。自动记忆播放进度,支持连续播放、错误自动跳过。适合系列课程和视频专辑场景。

    ### 5. 其他

    - 投屏:Google Cast + AirPlay ,基于浏览器原生 API
    - 放大镜:Canvas 圆形放大镜,按 Z 键切换,1.5x~4x
    - 缩略图和章节导航也都有配套的在线编辑器

    ---

    ## 统一数据协议

    这次设计了一套叫 ZWMAP 的 JSON 协议,把缩略图、章节、字幕、水印、标注、播放列表六个模块的数据格式统一了。所有在线编辑器导出的数据都是同一个协议,播放器自动识别类型,丢进去就能用。

    各个基于 ZWMAP 的在线工具: https://www.zwplayer.com/zh/tools/
    ---

    ## 框架和 WordPress

    - Vue 2 / Vue 3 / React 都有封装组件,npm install 就行
    - WordPress 插件同步更新了,古腾堡区块里直接配置属性就能用上面说的所有新功能,不用写代码

    WordPress 插件: https://wordpress.org/plugins/zw-player-video-embed/

    ---
    4 replies    2026-02-06 10:26:55 +08:00
    Fish1024
        1
    Fish1024  
       Feb 6
    看你说的不错。但个人/商业用途均免费,你们怎么挣钱呢?
    cwaxxd
        2
    cwaxxd  
       Feb 6
    不支持 H265 ?现在很多摄像头都默认 H265 了
    installHook.js:1 [MSEController] > Failed to execute 'addSourceBuffer' on 'MediaSource': The type provided ('video/mp4;codecs=hvc1.1.1.L123.B0') is unsupported.
    zwplayer
        3
    zwplayer  
    OP
       Feb 6
    @cwaxxd H265 是支持的,有可访问的地址或者视频文件吗?我们分析下
    myderr
        4
    myderr  
       Feb 6
    不知道为撒,ui 看着感觉有点老,不够现代化。有点像 bootstrap 的样式感觉
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5445 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 59ms · UTC 08:22 · PVG 16:22 · LAX 01:22 · JFK 04:22
    ♥ Do have faith in what you're doing.