项目博客关于

飞鱼

2023-02个人项目

一个漂亮得不像实力派的跨平台视频播放器
查看源码

项目亮点

项目预览

首页首页 播放页面播放页面 移动端自适应 + 亮暗色模式移动端自适应 + 亮暗色模式

幕后花絮

这个项目的诞生,更多来源于我的个人需求:我喜欢空闲的时候追剧,看电影来放松自己。

有些时候,我想看的片源,比如电锯惊魂,国内的视频网站可能不会引入或有删减,只能去一些相对小众的视频网站上观看。

但这些视频网站为了生存,往往会内置许多广告,严重影响观影体验,并且一般不怎么稳定,可能会随时跑路。

于是,自己制作一个在线视频资源播放器的想法,便开始萌发。

技术浅析

飞鱼的前身可以追溯到,我在大学时期使用 Flutter 开发的一款同名视频播放器。

后来,我在 Flutter 版飞鱼播放器的基础上,又将其陆续移植到了网页和 PC 端。

Flutter 版

早在 2019 年我还在读大学时候,我就开始边自学 Flutter 边开发飞鱼播放器。

当时 Flutter 社区并没相对成熟的播放器组件,我在官方 video_player 的基础上,封装定制了一套相对完善的视频播放器界面:支持常见的双击暂停/播放,手势调节播放进度/音量/亮度,视频倍速,重力感应横竖屏等。

后来,新版本又陆续增加了直播,投屏,分享链接,打开网页观看等贴心小功能。

网页版

大学毕业后,我将飞鱼移植到了网页端,与此同时旧的 Flutter 版本不再更新维护。

有趣的是,飞鱼网页版最初是一个手绘风格的 Vue 应用1

从此,打开浏览器随时随地,就能搜索播放自己想看的片源,非常方便。

首页首页搜索结果搜索结果播放页面播放页面

PC 版

网页版开发完成后,PC 端的适配就比较简单了。

考虑到打包后的应用体积和性能,我使用了最新的 Tauri v2.0 beta 来构建2

不愧是 beta 版本,让我一路踩了不少坑,网上相关的案例和资料实在是少得可怜,大多数需要自己翻源码来慢慢摸索。

我帮官方第一时间发现了许多问题,甚至有一次我提了一个 beta 版本的构建 issue,官方修复后还专门发布了一个小版本。

另外,有个网页端资源跨域问题,在 Electron 上简单配置一下即可搞定,但 Tauri 官方并没有提供底层支持。无奈,没有现成的轮子只能自己造。

尽管对 Rust 不熟,但我还是在 ChatGPT 的帮助下,快速上手并开发了我的第一个使用 Rust 编写的 Tauri 插件:tauri-plugin-cors-fetch,无需任何配置即可让 Tauri 应用内的网络请求支持 CORS,完美解决了跨域问题。

除此之外,飞鱼还是第一个通过 Github Action 实现全平台+全架构构建的 Tauri v2.0 beta 应用3,为社区提供了全平台打包最佳实践。

最后,飞鱼还登上了 Tauri 官方的 awesome-tauri 榜单上,撒花 🎉

备注

  1. 这个手绘风格的飞鱼,也是我的第一个 Vue 项目。

  2. 因为我用到了一个 v1 版本没有的新特性,并且 Tauri v2.0 beta 修复了许多已知问题。

  3. 飞鱼安装包覆盖以下平台和架构: Window x64/x32/arm64、macOS x64/aarch64/universal 和 Linux x64/i686/arm64/armv7。