Tauri 2 随机视频播放器：桌面端 + Chrome 悬浮窗

我做了一个偏「小而爽」的工具：桌面端用 Tauri 2（Rust + 原生 HTML/JS）实现随机视频/美图播放；浏览器端再配一个 Chrome 插件，在任何网页里点一下就能弹出可拖拽的悬浮窗播放器。

项目地址：https://github.com/1776686596/video-player

推荐优先使用浏览器插件：装好后在任意网页一键弹出悬浮窗，更轻量也更顺手；桌面端更适合当独立播放器使用（带接口/缓存管理与预加载兜底）。

项目 UI 文案沿用了“美女视频”的叫法，但它本质上是一个“可配置视频接口的播放器壳子”，换成任何公开视频/图片接口都行。

效果预览#

下图是 Chrome 插件在网页中的实际使用效果（右下角悬浮窗）：

项目由两部分组成#

1）桌面端（Tauri 应用）#

桌面端的目标是：播放体验尽量顺滑、接口尽量兼容、配置尽量可视化。

核心功能：

功能	说明
视频播放	自定义控制栏（播放/暂停、进度、音量、倍速、全屏）
自动下一个	视频结束自动切换下一条
预加载	后台提前下载下一条，降低切换等待
接口管理	支持分类切换/随机、添加自定义接口、删除自定义接口
缓存管理	一键清理当前播放与预加载队列
美图模式	同一套“接口/分类”能力，用于随机图片浏览

2）浏览器端（Chrome 悬浮窗插件）#

Chrome 插件的目标是：不离开当前网页，随时开关一个浮窗播放器。

交互上就一件事：点击扩展图标 → 注入脚本 → 页面右下角出现悬浮窗。

悬浮窗支持：

拖拽移动
最小化/关闭
自动下一个 / 手动下一个

桌面端实现要点：把“网络层复杂度”留在 Rust#

做“随机视频播放器”最烦的不是 UI，而是接口返回的多样性：

302 重定向到真实地址
JSON 包一层 data/url 字段
直链播放失败（跨域/CORS、Range、Referer、UA 等问题）

这个项目的策略是：前端只负责播放与交互，Rust 侧负责取链、解析与兜底。

自定义 `stream://` 协议：兜底播放兼容性#

项目注册了一个自定义协议 stream，前端遇到“直链播放失败”时会退回到：

stream:///video?...：Rust 侧作为 HTTP 代理（并带 Range 支持）
stream:///video/{id}：直接播放“预加载队列”里已下载的视频字节

这样 <video> 只要能播 stream://，很多兼容问题就能被统一兜底。

预加载：把“等待”变成“切换”#

预加载队列维持一个很小的上限（例如 2 条），让“下一个”尽量像切换而不是等待：

播放过程中按节奏触发 preload_next
切换时优先 pop_next_video 拿到 stream:///video/{id}

再配合前端“错误自动跳过（指数退避）”，接口偶发不稳定时也不会卡死。

本地运行与打包#

运行桌面端（Tauri）#

1
npm install
2
npm run dev

打包：

1
npm run build

安装 Chrome 插件（开发者模式）#

打开 chrome://extensions/
开启右上角「开发者模式」
从 GitHub 下载/克隆仓库：https://github.com/1776686596/video-player
点击「加载已解压的扩展程序」，选择仓库里的 chrome-extension/ 目录

免责声明#

本项目会请求第三方公开接口资源，仅用于学习与交流。请在使用与二次分发时遵守法律法规、版权与接口方使用条款，并自行评估接口稳定性与安全性。