[分享创造] [分享] ZWPlayer 更新 v3.3.2，加了贴片广告、音乐模式、跨视频字幕搜索，界面也翻新了一版

之前在 V2EX 分享过 v3.3.0 和 v3.3.1 的更新，收到不少反馈，感谢各位。v3.3.2 折腾了一阵子才发出来，这次更新量比较大，来同步一下。

老规矩先介绍下：ZWPlayer 是一个免费的网页视频播放器，纯前端，单个 JS 文件引入就能用，支持 HLS / DASH / FLV / WebRTC / RTSP ，不依赖 CDN ，内网也能跑。前两个版本做了交互标注、防录屏水印、播放列表、VR 全景、多音轨这些。

1. 贴片广告

可以在正片播放前后插自己的宣传片（ pre-roll / post-roll ）：

• 三种跳过策略可配：强制看完、立即可跳、N 秒倒计时后可跳
• 支持点击跳转落地页
• 循环播放正片时广告只插一次，不会反复打扰

自有频道、企业内训平台、知识付费站点，不接第三方广告系统也能把「内容 + 变现」的闭环做了。

2. 播放模式：一个播放器四种形态

新增 mode 配置，两个新形态比较有意思：

• 预览模式：鼠标悬停卡片自动静音播放一段预览，从视频中间位置开始直击精华，离开就暂停。做视频列表、课程目录、推荐墙的同学应该都用得上这个交互。
• 音乐模式：播纯音频时不再是黑乎乎的视频框，有旋转的黑胶封面、逐行高亮歌词（点击任意行跳转）、频谱可视化，手机锁屏也能用系统媒体键控制。

更省心的是混合播放列表：一份列表里视频和音频混着放，播放器自动识别内容类型切换形态——播到音频出音乐面板，切回视频还原，不用写一行判断代码。

3. 跨视频字幕搜索

字幕搜索从「单个视频内搜」升级成了跨视频全文检索：输入台词关键词，播放器把列表里所有视频的字幕都搜一遍，结果按视频分组，标注清楚出自哪一集、第几分第几秒，点击直接跳到台词位置。

追剧找台词、课程找知识点、会议回放找发言，比一集集翻快得多。搜到之后还能按字幕条目循环播放、自定义 A-B 段反复听。

4. DASH 内嵌字幕预下载

v3.3.0 的时候 HLS 内嵌字幕可以自动预下载拼成完整字幕，这次 DASH 也对齐了：播放 DASH 流时内嵌字幕自动进播放器字幕列表，搜索、翻译、双语对照、导出 SRT 都能用。零配置，播放即生效。

5. 界面翻新了一版

这个版本后半程基本都在改界面：

• 控制栏现代化：显隐过渡更顺滑，自动隐藏更快，暂停时不再自动藏起来
• 设置菜单重构成「首页 → 子页」：倍速、清晰度这些收纳进齿轮菜单，首页直接显示当前值；截图、投屏、画中画平铺成磁贴，点了就走
• 桌面和移动端风格统一了

6. 上拉缩略图条

配置了缩略图的话，按住进度条往上拉，会展开一整行宽的缩略图条，白色准星对齐当前位置。可以拖动逐帧浏览，也可以直接点击目标帧跳转；点错了取消，回到原进度继续播。几十分钟的视频里找某个画面，不用来回拖进度条碰运气了。

7. 其他更新

• 数字键 1-9 按百分比跳转（ 1 是 10%，9 是 90%），0 从头重播；音量条支持滚轮调节
• 移动端菜单改成底部滑出的面板，行高开关都加大了；小屏下控制栏次常用按钮自动折叠收纳
• 进度条章节改成分段缝隙样式，播放进度一眼能看清；附注标记可以直接点了跳到对应时刻
• 没配海报的视频自动用首帧当封面；字幕支持自由拖位置

相关链接

• 官网： https://www.zwplayer.com
• 在线试玩： https://www.zwplayer.com/zh/tools/videoplayer/
• 下载： https://cdn.zwplayer.com/v3.3.2/zwplayer.zip
• GitHub Releases： https://github.com/chenfanyu/zwplayer-release/releases
• Gitee Releases： https://gitee.com/chenfanyu/zwplayer-release/releases
• 更新日志： https://www.zwplayer.com/zh/pages/company/changelog.html

升级还是替换 zwplayer.js 那一套，向后兼容，新功能默认不启用。

有问题或建议欢迎回帖，也可以加微信 zwplayerX 交流。