ZViewer

一起看
一起听.

ZViewer · 多人同步共享平台,进度同步、多轨弹幕、歌单同频。

哔哩哔哩 OpenList Emby Jellyfin WebDAV / FTP MP4 直链 服务器文件
7 种
片源接入
×N
弹幕轨道叠加
双端
手机电脑兼容
2 大
音乐音源
Agenda · 本次介绍

五个部分,大致了解 ZViewer

01
一起看
同步观影 · 多源片源 · 多轨弹幕 · 字幕 · 高画质 · 播放能力
04 — 08
02
语音聊天
基于 LiveKit 的实时语音 · 一键开关
09
03
一起听
网易云 × 哔哩哔哩双音源 · 一键搜歌收藏 · 歌词页 · 分区屏蔽
10 — 13
04
个性化
个性化设置 · 动态主题
14 — 15
05
随时随地上手
手机电脑双端适配 · 手机 App · 更多细节
16 — 17
What is ZViewer

可以把它看成一个和朋友一起用的放映厅:
开一间房,把链接发出去,
画面和歌曲就会在房间里保持同步。

房

一间房,一个节奏

房主点播放,房间里的画面与歌曲会一起走;暂停、拖进度、换内容时,其他人也会跟着切换。

链

一条链接

不用提前下载或传文件,B 站链接、网盘目录、媒体库都可以直接放进来。

屏

手机、电脑都能进

用浏览器打开即可,手机竖屏横屏都能用,不需要安装插件,也不要求对方熟悉技术。

01 · 同步观看

片源挂进来,进度跟着走

B 站追番、网盘剧集、自建媒体库都可以作为片源。不管影片来自哪里,房间里的进度是一致的;房主短暂掉线时,服务器会先维持住播放。

B

哔哩哔哩

输入 BV 号就能播,可以切换分 P 与清晰度,封面和弹幕会一并加载。

O

OpenList / 网盘

挂上网盘目录,剧集列表直接在房间里翻,点哪集看哪集。

E

Emby / Jellyfin

媒体库整库接入,存储库选片,家里 NAS 变成共同片库。

W

WebDAV / FTP

常见的存储服务大多可以接入,签名直链过期后会自动重新解析。

M

MP4 直链

能在线访问的视频地址,都可以放进房间播放。

服

服务器文件挂载

可以挂载服务器上的影片目录,把本机硬盘里的片子直接作为房间片库,不需要再接入外部网盘。

权

想自己动手?

观众可以申请控制权,房主同意后可以暂停、跳转;换片等操作仍由房主掌握,也可以随时收回。

02 · 弹幕翻倍

觉得弹幕冷清,可以多开几条轨道

哔哩哔哩弹幕、弹弹Play 弹幕库、本地弹幕文件可以同时开启,多条轨道叠加显示,冷门作品看起来也会热闹一些。

+

轨道自由组合

想开几条就开几条,各轨道互不影响,弹幕数量自然会多起来。

文

本地弹幕文件

本地的弹幕 XML / JSON 文件可以直接拖进来使用。

多

同视频多挂 B 站弹幕

同一个视频可以添加多条哔哩哔哩弹幕轨道,同一作品的多个投稿或版本可以一起叠加。

B站官方 + 弹弹Play + 自定义 = 弹幕 ×N
03 · 字幕

支持的字幕格式不少,优先保证稳定

字幕会先经过统一转换再渲染,因此不追求特效的原样复刻,换来的是更广的格式兼容与相对稳定的播放,渲染由前端稀疏探测字幕引擎负责。

统一转换渲染 · Unified Rendering"我陪你走到最后,能不能不要回头。"
SRTASSSSAVTTSMISUBMKV 内嵌字幕
换

统一转换

字幕先统一转换再渲染,ASS 花字、卡拉OK 之类的特效不会原样显示,文字内容与时间轴则保持一致。

容

常见格式都能用

SRT、ASS、SSA、VTT、SMI、SUB 等常见格式都可以使用,MKV 内嵌字幕也能直接提取。

擎

稀疏探测字幕引擎

前端稀疏探测字幕引擎按需处理当前需要的字幕段,长片或多字幕轨时更省资源。

04 · 高画质

大会员画质,全房间一起享受

高画质有三种实现方式:CLI 模式下视频流由各成员本机直连 Bilibili,几乎不占服务器流量;服务器转发可以让全房间共享高画质,代价是占用带宽。三种模式可以按需切换。

推荐

CLI 本地代理模式

每个成员在本地各自运行一个 CLI 小程序,用自己的 Bilibili 账号解析片源,视频流由本机代理直接从 B 站拉取,不经过服务器。服务器只承担同步信令,几乎不消耗带宽。

1080P 高码率4K 超清高码率大片几乎不占服务器流量
备用

服务器转发模式

没有运行 CLI 时,服务器会把高画质流转发给房间成员,画质同样可以保持,代价是占用更多服务器带宽,模式可以随时切换。

开箱即用无需安装全员高画质
兜底

MP4 直链转发模式

B 站返回的 MP4 直链地址经后端代理转发后直接播放,不依赖 DASH 解析,兼容性表现较好,最高画质 720P,作为前两种模式之外的兜底。

直链播放兼容性最佳最高 720P即点即看

CLI 与服务器转发基于哔哩哔哩 DASH 片源,MP4 直链转发的兼容性表现较好,三种模式可以按需切换。

05 · 播放能力

能直连的直连,该转码的转码

播放时会按格式选择引擎:浏览器支持的格式直接播放,部分不支持的交给 playersvideo 在浏览器端处理,服务器不需要安装转码工具。

直

原生直连 · video.js

浏览器原生支持的格式(MP4、WebM 等)直接交给 video.js 播放,不需要转码。

转

转码播放 · playersvideo

遇到浏览器部分不支持的 MKV / AVI / TS / WMV 时,会自动切换到 playersvideo 引擎,解析容器并重封装后播放;DTS / AC3 / EAC3 音轨会实时转为 AAC,整个过程在浏览器中完成。

直连MP4 / WebM 等支持的格式→video.js 直接播放→直接播放 ✓
转码MKV / AVI / TS / WMV→playersvideo 解析容器→音轨实时转 AAC→重封装后播放 ✓
06 · 语音聊天

边看边聊,不用另开语音软件

房间内置基于 LiveKit 的实时语音:看电影、听歌、共享屏幕时都可以随时开口,不需要再另外开语音软件。

稳

LiveKit 实时引擎

语音基于 LiveKit 实时通信方案,连接相对稳定,弱网与重连时的表现也比较好。

轻

轻量不抢网

实时语音占用的带宽不大,一边看高画质影片一边聊天,通常不会互相影响。

麦

麦克风一键开关

想说话时点开,想安静时关掉,不用退出房间。

景

什么场景都带你

一起看、一起听、屏幕共享时都可以使用语音。

07 · 一起听 · 双音源

听歌不挑平台,网易云 × 哔哩哔哩

"一起听"同时支持网易云音乐与哔哩哔哩两种音源:想听歌单或想刷音乐区 MV 都可以,切歌时房间成员会一起切换。

网

网易云音乐

扫码登录即可使用,曲库比较全;VIP 凭证在房间内共享,音质会根据登录状态自动适配;听到喜欢的歌,可以一键搜索并收藏进歌单。

B

哔哩哔哩

音乐分区的视频可以直接当歌听,配合音乐分区屏蔽词过滤不想要的内容;喜欢的 MV / PV 也可以设为歌词页背景。

扫码登录VIP 全房共享音质自动降级全房同步切歌歌词逐句滚动
08 · 一起听 · 一键搜歌

看完视频想听歌,可以一键搜索并收藏

在"一起听"里播放 B 站视频时,可以用视频标题去网易云搜索同名歌曲,搜到后也能一键收藏进歌单。

STEP 1 · 正在播放
【4K】某某歌曲 · 神级现场
哔哩哔哩 · 一起听房间

视频看着看着,好歌当场锁定。

→
STEP 2 · 一键搜索
某某歌曲(同名)
网易云音乐 · 搜索结果第 1 位

按视频标题自动去网易云搜索,不用手动复制粘贴。

→
STEP 3 · 一键收藏
某某歌曲
已加入你的网易云歌单
✓ 已收藏

收藏动作直接同步到网易云账号,歌单原地更新。

扫码登录网易云 VIP 凭证全房共享 音质自动适配 全房同步听
09 · 一起听 · 歌词播放页

歌词页上的这几个按钮

"一起听"的歌词播放页除了歌词,还提供了推荐、收藏、搜索与 PV 背景等按钮,听完一首可以接着听下一首。

正在播放 · 某某歌曲
网易云音乐 · 一起听房间 · 歌词滚动中
"就让我,一切随风吹向大海 ——"
↻ 自动推荐 ♥ 收藏到 bilibili 收藏夹 ★ 一键收藏 music 收藏夹 🔍 在网易云搜索 ▶ 背景使用 B 站 PV
荐

播放列表自动推荐

不知道下一首听什么时,播放列表会给出推荐。

B

收藏到 bilibili 收藏夹

把正在听的歌收进 bilibili 收藏夹。

M

一键收藏 music 收藏夹

也可以同步收进 music 收藏夹,两个收藏夹按习惯分开使用。

搜

在网易云搜索

在网易云中搜索同步收藏的歌单,之前收藏的歌可以随时找回。

PV

背景使用 B 站 PV

播放页背景可以切换为哔哩哔哩 MV / PV。

词

歌词同步滚动

歌词逐句高亮滚动,与房间的播放进度保持一致。

10 · 一起听 · 分区屏蔽

音乐分区屏蔽,让歌单清爽一些

哔哩哔哩音乐分区的内容质量参差,可以用两级屏蔽词把不想要的内容过滤掉。

全局屏蔽词翻唱直播回放命中即屏蔽
音乐分区屏蔽 · 已开启
全

全局屏蔽词

在一处设置后全局生效,命中的内容不会再出现在列表里。

分

音乐分区屏蔽词

音乐分区可以单独设置一套词库,只作用于听歌场景,与全局词互不影响。

逻

实现逻辑

先识别哔哩哔哩音乐分区内容,再做两级关键词匹配,命中的内容会从列表和推荐中过滤掉。

B 站内容→识别音乐分区→全局屏蔽词匹配→分区屏蔽词匹配→命中过滤 ✓
11 · 个性化

个性化设置比较细,常用的地方都能调

弹幕与字幕的字体字号、一起听页面的背景效果,都提供了调节入口。

字体与字幕

弹幕、字幕各配一套字体与字号

弹幕字体
默认思源黑体圆体楷体
字幕字体
跟随弹幕独立设置
字幕字号
中

一起听 · 背景氛围

歌词播放页的背景相关设置

封面模糊
视频背景模糊
背景压暗
UI 模糊浓度
背景显示方式
铺满裁剪完整显示模糊填充
12 · 颜值

界面外观,可以按自己的习惯调

Material You 动态主题:选定一个颜色后整套界面会跟着变化,另外还有玻璃拟态质感、自定义背景图与颜色强度调节。

主题色 · 全局生效

颜色强度

强度可以从很淡调到比较明显。

▶ 播放按钮 · 主题色跟随
玻璃卡片 · 毛玻璃质感
浅色 / 深色模式随你切换
自定义背景图
禁用 hover 位移
自定义圆角

如果觉得动画偏多,可以开启精简动画或禁用 hover 位移,圆角也能自定义。

13 · 细节控狂喜

一些容易被忽略的小地方

共

屏幕共享

可以把屏幕共享给房间成员,也支持接入 OBS 直播。

续

房主掉线不断片

房主临时离开时,服务器会先维持进度,超过 10 分钟未返回才自动关房。

评

评论与弹幕

影片下方可以留言评论,弹幕轨道可以随时开关。

链

直链自动续期

网盘签名直链过期后会自动重新解析。

审

成员注册审核

新成员注册后会进入审核队列,通过后可以加入房间。

更

一键自动更新

支持一键更新,数据与配置会保留。

14 · 随时随地

手机和电脑,都可以进房间

ZViewer 网页端对手机与电脑的界面都做了适配:电脑上是完整的大屏布局,手机自动切换竖屏 / 横屏,支持触屏手势与滑动调节音量、进度,用浏览器打开即可,不需要安装插件。

电脑端 · 大屏完整布局

手机竖屏 · 浏览与加入房间

手机横屏 · 沉浸观影 + 手势

ZViewer 手机端 App · 独立开发中
面向手机端进一步适配的独立应用正在开发中,由 FredQin 负责。
ZViewerAPP →

开一间房,叫上朋友。

ZViewer · 一起看、一起听、一起追。开源免费,可以自行部署。

MIT License · Open Source · 建议使用 Chrome / Edge 等 Chromium 内核浏览器

ZViewer.
01/18