【开发者自荐】 zwplayer - 免费的H5播放器支持直接播放rtsp流、vue框架等众多特性


title:zwplayer

概述

zwplayer是一款基于HTML5的Web网页播放器,是一款简单易用的H5媒体播放器。zwplayer为 H5 视频播放应用开发者提供一个零成本、简单易用、具备丰富协议支持、功能丰富与界面美观的Web 播放器,以降低Web应用开发者的时间成本,加速项目进度。zwplayer为开发者完成一个Web播放器完整的操作界面开发,提供了一个跨浏览器一致性的操作界面。

众所周知,所有H5播放器的核心都是HTML5内置的video元素(包括audio元素),video元素本身提供了丰富的接口,但video元素并未提供令人满意的操作界面,video元素的许多内建功能(例如对Media Source Extensions的支持,对Webrtc的支持)都需要开发者自己学习摸索来进行开发调用。开发Web播放器主要工作就是操作界面开发,有些web 播放器提供可以分开的UI组件技术,试图通过提供丰富的API来让播放器使用者自己开发操作界面UI,我们认为如果一个web播放器没有提供一个可用的前端UI,即使将video元素的接口重新包装,输出各种功能丰富的所谓API(例如,著名的videojs),让开发者自己开发界面,还不如开发者自己基于video元素直接开发,避免因为用javascript这种脚本语言层层包装带来的性能损失,再者,开发者自己直接基于video元素自行开发,也可以免除学习那些播放器提供的重新包装过的API的时间成本。

因此zwplayer 的目标是挖掘video元素的内在丰富功能,试图为开发者提供一个具备完整操作界面并经过严格测试的产品级播放器,让开发者调用丰富的H5视频播放内核功能零时间成本。开发者使用zwplayer便无需自己研究video元素来开发界面,同时zwplayer也提供了许多video元素本身不具备的功能操作界面,例如多码流切换、多协议自适应、弹幕渲染等功能界面。zwplayer的原则不是对video元素接口进行二次包装后给开发者提供所谓的丰富API,zwplayer力图挖掘video元素的潜在功能提供一个统一完整的操作界面,zwplayer仅对部分需要交互数据的功能提供非常稀少的API(例如加载弹幕、字幕与章节打点),因此zwplayer暴露的接口方法一般都是为了实现video元素所不具备的功能,因此避免开发重复学习API。开发者自行开发出一个产品级的播放器,往往需要耗费大量时间与精力,采用zwplayer可以避免这些无畏的浪费,加速项目进度,提高产品稳定性。

名称含义

zwplayer 的全称为 Zero Web PlayerZero 的含义为零成本,zwplayer试图在以下方面给开发者降低成本。

零费用成本

永久免费,完全免费,终生免费,无需为任何token或license支付费用。

零学习研发成本

完整的内建UI功能界面,没有过多的API接口,无需额外自行开发操作界面。

零升级成本

永久固化的API,不用担心后续升级需要修改代码,只要进行简单更新文件即可。

零风险成本

没有任何联网后门,没有任何广告,没有任何使用情况统计代码。

零部署成本

不依赖任何第三方库,代码干净纯洁,简单复制 zwplayer 发布包到网站相应子目录,即可完成部署,不依赖CDN,私网、内网(不连公网)都能用。

实用功能介绍

以下是zwplayer的实用功能(非技术特点)介绍,可能并不是完整的功能列表,部分功能特点分散在其它文档中介绍,请参考相关文档。

  1. 全功能播放器,支持点播流与直播流
  2. 点播流支持 MP4、hls、dash等协议播放
  3. 直播流支持:http-flv、hls、dash、http-ts等所有当前流行协议
  4. 支持webrtc低延时直播播放
  5. 支持 rtsp协议转发技术,能在H5网页里直接播放rtsp流
  6. 支持多码流(视频清晰度)切换,对 hls、dash 等协议支持多码流自适应切换
  7. 支持多种格式字幕,支持 vtt、srt、json与bcc 等格式的外挂字幕,支持hls、dash等流内嵌字幕的提取与选择控制
  8. 支持双字幕同时渲染(多语言字幕),用户随意选择需要显示的单个字幕或全部字幕
  9. 内建完整的弹幕支持,包含弹幕渲染与弹幕设置
  10. 支持预览缩略图,在播放进度条上滑动鼠标,可以预览视频内容
  11. 支持网页全屏、画中画与自动小窗口等播放操作界面
  12. 支持视频画面多角度旋转,包括正反转180度,正反转90度等
  13. 支持图像截取,支持截图直接上传功能
  14. 支持设置自定义logo
  15. 支持点播流速率调节
  16. 支持播放过程中问答弹出功能
  17. 支持点播节目章节(关键点)打点
  18. 支持自动播放预探测技术,完美解决当今浏览器未设置静音时自动播放操作在用户发起交互操作前失败的难题
  19. 支持禁止拖动播放进度
  20. 支持视频颜色属性调节,包括亮度、对比度、色调与饱和度
  21. 免插件调用,功能全内置,播放扩展协议无需手工设置插件,调用简单
  22. 开发调用简单,较少的API,整合简单容易,只需简单配置即可使用播放器
  23. 升级简单,永久固化的API,使后续升级只须简单替换文件即可,代码零改动
  24. 完全独立的库,无需其它第三方js库调用,不依赖于jQuery等任何第三方js库,集成简易
  25. 完全免费使用,没有任何限制,无论个人还是商业使用
  26. 非常容易集成,仅须引用一个js文件
  27. 轻量级高性能,所有外部扩展模块动态智能加载,不用到的不会预先加载,加速网页加载
  28. 可扩展的平台支持,多种编码、多种协议与跨浏览器跨平台
  29. 支持vue2,vue3

使用说明

  1. zwplayer官网 https://www.zwplayer.cn
  2. 下载地址
  3. 调用rtsp协议示例
  4. vue2/3使用说明
  5. 在线播放器,支持播放网络和本地文件

v3.2.1 2026-01-24 (最新版本)

v3.2.1下载地址: https://cdn.zwplayer.cn/v3.2.1/zwplayer.zip

本次更新是 ZWPlayer v3.2.0 系列的深度优化版本。我们不仅在字幕与章节系统上实现了功能跃迁,还针对移动端交互、WebRTC 协议生态以及 UI 细节进行了全方位的打磨,旨在为开发者提供更专业、更流畅的跨端播放解决方案。


:sparkles: 功能新增与优化

1. 字幕与章节系统:从“静态显示”到“深度交互”

  • 智能内容检索: 新增内置字幕与章节搜索面板,支持通过关键词快速检索内容并一键跳转至对应视频进度,实现字幕即索引,台词秒跳转。
  • 零门槛文件接入: 支持将本地字幕(SRT/VTT/BCC)或章节(JSON/VTT)文件直接拖拽至播放器加载,显著提升内容调试与观影效率。
  • 全生命周期回调: 新增 onSubtitleLoadedonChapterLoaded 事件,方便业务逻辑深度联动。
  • 格式自动检测: 播放器现可自动识别 VTT、SRT、JSON 等多种字幕与章节内容格式。

2. 流媒体协议族:WebRTC 矩阵全面覆盖

  • 多云平台深度集成: 在支持标准 WHEP 的基础上,新增对阿里云 ARTC 及腾讯云 TRTC 协议的官方适配,赋能超低延迟直播场景。
  • 协议智能识别: 强化底层检测逻辑,支持对 webrtc://、artc://、trtc://、brtc:// 等多种协议头的自动解析与秒开。
  • 全浏览器录制兼容: 针对 Firefox 和 Safari 浏览器进行了专项优化,确保录制功能在主流浏览器中均能稳定运行。

3. 移动端适配:更懂触屏的交互设计

  • 高效快进新体验: 引入长按触发 2 倍速播放机制,松开即刻恢复原速,操作逻辑对齐主流短视频 APP。
  • 空间布局优化: 小窗口模式下智能隐藏非必要工具条,并缩减中间播放按钮尺寸,确保小屏下画面信息量的最大化。
  • 微信环境智能策略:新增微信浏览器环境检测,针对微信自动播放限制,在微信内自动禁用 autoplay 配置,避免持续转圈等待,提升首屏体验。

4. UI/UX 进化:消除干扰,回归视觉纯净

  • 全局面板互斥机制: 建立全局面板管理器,确保字幕搜索、设置、章节等功能面板同时仅激活一个,避免 UI 重叠与视觉混乱。
  • 跨端交互兼容: 修复移动端浏览器 :hover 伪类导致的菜单“粘性显示”问题。
  • 视觉语言统一: 统一录制选项、滚动条与弹出框样式,提升整体品牌感。

:wrench: 问题修复

  • Fluid 模式适配优化:修正了在 fluid 自适应模式下,播放竖屏视频时,容器不能正确匹配比例导致出现非预期滚动条的问题。
  • 多语言内核修复:修正了部分提示的多语言映射,以及切换语言时 disableMutedConfirm 配置失效的问题。
  • 快捷键冲突:解决了在搜索面板操作方向键时,意外触发底层播放器音量调整的冲突问题。

更新日志 3.2.0:

本次更新是一个重要功能版本,重点新增了多项实用配置项,显著增强了播放器的本地化、交互性和播放能力。

功能新增与优化

1. 本地文件播放 (localPlayback)

  • 功能: 支持直接播放用户设备上的本地视频/音频文件
  • 价值: 无需上传至服务器,为用户提供更快捷、私密的播放体验,适用于文件预览、本地媒体库等场景

2. 片段循环播放 (segmentButton)

  • 功能: 允许用户选择视频中的特定片段进行循环播放
  • 价值: 极大方便了教学复盘、精彩瞬间重放、健身动作练习等需要重复观看特定内容的场景

3. 录制功能 (recordButton)

  • 功能: 支持录制正在播放的视频或仅提取音频
  • 价值: 为用户提供了内容保存和二次创作的能力,如录制直播片段、制作音频剪辑等

4. 多语言支持 (lang)

  • 功能: 新增国际化配置项,支持界面语言切换
  • 价值: 使播放器更容易集成到国际化项目中,提升非中文用户的使用体验

5. 4倍增益播放

  • 功能: 支持最高4倍速的视频播放
  • 价值: 满足用户快速浏览长视频内容(如课程、会议录像)的需求,提升观看效率

6. 丰富快捷键

  • 功能: 增加了更多键盘快捷键操作
  • 价值: 为高级用户提供更高效、便捷的键盘控制方式,提升操作体验

问题修复

  • 修复了 fluid 模式下部分视频显示不完整的问题
    • 影响: 解决了在流式布局中视频可能被裁剪或显示异常的bug,确保了自适应布局下的观看效果

牛!非常好的工具。进度条颜色有点不好看。

1 个赞

当前升级到3.1.4版本,更新日志如下:

v3.1.4 `2025-08-30`

功能新增与优化

  • **协议支持扩展**:新增对 `webrtc://` 及 `brtc://` 流媒体协议的支持。
  • **HLS 增强**:增加对 HLS 流中 HEVC 编码格式的兼容,以支持更高效的视频播放。
  • **直播优化**:当设置 `isLive=true` 时,播放器将自动启用直播追帧功能,确保更低的延迟。

问题修复

  • 修复了在 HTTP-FLV 点播模式下可能无法正常播放的问题。

v3.1.3 `2025-03-06`

体验与兼容性

  • **框架适配**:新增对 Vue 2 与 Vue 3 框架的官方适配支持,便于在主流前端项目中集成。
  • **样式优化**:解决了在部分移动设备上的UI样式兼容性问题,提升了移动端的视觉一致性。