adminym/embyx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0

Browse Source
This commit is contained in:
juneix
2026-03-07 17:20:39 +08:00
parent 0ae9155c2f
commit 50522dd1dc
5 changed files with 174 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+66 -44
View File
@@ -1,80 +1,89 @@
# 📱 EmbyX Vertical Player `v1.1`
# 📱 EmbyX
[中文说明](./README_zh.md) | [English Documentation](./README.md)
[中文说明](./README_zh.md)
> A TikTok-style web interface for Emby / Jellyfin, designed for browsing and managing short videos in an immersive way.
---
A TikTok-style web player for Emby / Jellyfin. Experience your private media library in a whole new, immersive way.
## ✨ Features
- **Fluid Playback**: TikTok-style vertical scrolling, immersive full-screen experience.
- **Grid View**: Browse with cover walls, supports pagination and random refresh.
- **Direct Play**: Works natively on modern devices. Support for 8K, AV1, and HEVC without transcoding.
- **Library Sync**: One-tap to favorite/unfavorite videos, fully synced with Emby server.
- **Key & Mouse Support**: Complete keyboard shortcut mapping. Friendly for TV and PC browsers.
- **PWA Ready**: Install as a desktop or home screen app.
- **Privacy First**: All data is stored locally; nothing is uploaded to the cloud.
- **Fluid Playback**: TikTok-style vertical scrolling for an **immersive** experience.
- **Direct Play**: Up to **8K HEVC / AV1** on Android—no transcoding.
- **Poster Wall**: Elegant album view with pagination and **shuffle**.
- **Emby Sync**: Real-time sync for **libraries, playlists, and favorites**.
- **Desktop Friendly**: Optimized for **keyboard & mouse**, Perfect for TV and PC.
- **PWA Ready**: Install as a **standalone** app on your home screen or desktop.
- **Privacy First**: All data stays **on your device**, no cloud uploads.
## 💡 Get Started
Try EmbyX instantly via the official web app:
- 🌐 **Main Site** - [embyx.5nav.eu.org](https://embyx.5nav.eu.org)
- ⚡ **Mirror Site** - [embyx.5nav.pp.ua](https://embyx.5nav.pp.ua)
Prefer full control? You can **self-host** EmbyX on your own server.
## 📢 Spread the Word
If EmbyX makes your digital life easier, please share it with your friends or on social media! As an independent developer, your word-of-mouth is the best way to help this project grow.
> Love it? [Donations are welcome!](#❤️-support-the-project)
---
## 🔮 Playback Performance
| Device | HEVC Decode | AV1 Decode |
|:---:|:---:|:---:|
| Apple | A9 (2015) / M1 | A17 Pro (2023) / M3 |
| Android | Budget (2016) | Budget (2024) |
| PC | Intel Core 6-8th Gen (iGPU) | Intel Core 11th Gen+ (iGPU) |
| Android | Budget Phones (2016) | Budget Phones (2024) |
| PC | Intel 6-8th Gen iGPU | Intel 11th Gen+ iGPU |
---
## ⌨️ Shortcuts Guide
| Key | Function |
|:---:|---|
| `W / S / ↑ / ↓` | Previous / Next Video |
| `A / D / ← / →` | Seek Back / Forward 15s |
| `W / S / ↑ / ↓` | Prev / Next Video |
| `A / D / ← / →` | Rewind / Forward 15s |
| `Space / Click OK` | Pause / Play |
| `U / Double Click OK` | Favorite Video |
| `J / Menu Key` | Toggle Aspect Ratio |
| `M` | Toggle Mute |
| `I` | Open Settings / Profile |
| `E` | Toggle View Mode (List/Grid) |
| `R` | Sequential / Random Mode |
| `F` | Fullscreen Mode |
| `G` | Toggle Libraries |
| `V` | Show File Info |
| `I` | Profile |
| `E` | Toggle View |
| `R` | Sequential / Random |
| `F` | Toggle Fullscreen |
| `G` | Select Libraries |
| `V` | Media Info |
---
## 📁 Directory Structure
```
embyx/
├── zh/ # Chinese Version
│ ├── index.html
│ ├── manifest.json
│ └── ...
├── en/ # English Version
│ ├── index.html
│ ├── manifest.json
│ └── ...
├── README.md # English (Default)
└── README_zh.md # Chinese
├── README.md # English Documentation (Default)
├── README_zh.md # Chinese Documentation
├── Dockerfile # Docker Image Build File
├── docker-compose.yml # Docker Compose Configuration
├── entrypoint.sh # Docker Entrypoint
└── nginx.conf # Nginx configuration
```
---
## 🚀 Deployment
### Option 1: Direct File Hosting (Recommended)
Simply put all files from either `zh/` or `en/` folder into your web server (Nginx, Apache, etc.).
Simply put all files from `en/` folder into your web server (Nginx, Apache, etc.)
### Option 2: Docker Deployment
One image, multiple languages. Controlled by environment variable.
If you don't want to mess with the web environment, you can use docker to deploy quickly.
#### Docker:
```bash
docker run -d \
--name embyx \
@@ -83,17 +92,30 @@ docker run -d \
-e APP_PORT=8090 \
ghcr.io/juneix/embyx:latest
```
#### Docker Compose:
```yaml
services:
embyx:
image: ghcr.io/juneix/embyx:latest
container_name: embyx
restart: unless-stopped
network_mode: host
environment:
- APP_LANG=en # English Version
- APP_PORT=8090 # Access Port
```
## ❤️ Support & Community
If you find EmbyX useful, consider supporting its development or joining our community. Your word-of-mouth and support help this project grow!
| Support | Community |
| :--- | :--- |
| [![Donate with PayPal](https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://paypal.me/juneixtse) | [![Telegram Channel](https://img.shields.io/badge/Telegram-Join%20Channel-26A5E4?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/juneix_en) |
| [![Buy Me a Coffee](https://img.shields.io/badge/Ko--fi-Support%20Me-FF5E5B?style=for-the-badge&logo=kofi&logoColor=white)](https://ko-fi.com/juneixtse) | [![X (Twitter)](https://img.shields.io/badge/X-Follow%20Me-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/juneix_tse) |
| Env | Description | Default |
|---|---|---|
| `APP_LANG` | `en` (English) / `zh` (Chinese) | `en` |
| `APP_PORT` | The port the container will listen on | `8090` |
---
## 📝 License
MIT License — Feel free to use, PRs and Issues are welcome.
👨🏻‍💻 Author: [@Juneix](https://juneix.github.io)
🛜 Official Site: [June's Hub](https://5nav.eu.org)
README_zh.md
+59 -76
View File
@@ -1,20 +1,33 @@
# 📱 EmbyX 竖屏播放器 `v1.1`
# 📱 EmbyX
> 这是一个技术小白借助 Antigravity 和 Emby API 制作的 Web 应用，仿抖音风格浏览、管理 Emby 的短视频。
---
EmbyX 是一款专为 Emby / Jellyfin 打造的 Web 原生应用，完美复刻抖音·短视频沉浸式交互，让你的私人媒体库焕发全新的刷片体验。🎉
## ✨ 功能特色
- **流式播放**：抖音风格上下滑动，沉浸式全屏体验
- **格子视图**：封面墙浏览，支持分页与随机换一批
- **直接播放**（Direct Play）：安卓 AV1、8K 不转码
- **收藏管理**：一键收藏 / 取消，同步 Emby 数据库
- **键鼠适配**：完整键盘快捷键，电视/电脑浏览器友好
- **PWA 支持**：可安装为桌面/主屏幕应用
- **私有化部署**：数据本地存储，不上传云端
- **直接播放**：安卓最高支持 8K HEVC / AV1 不转码
- **相册视图**：封面墙浏览，支持分页、换一批
- **Emby 同步**：支持媒体库、播放列表、收藏夹
- **键鼠适配**：纯按键控制，电脑、电视轻松摸鱼
- **PWA 支持**：添加到主屏幕 / 作为应用安装
- **隐私第一**：数据本地存储，绝不上传云端
## 💡 快速开始
推荐直接访问我的 EmbyX 官方网站，开箱即用：
- 🌐 **主站点** - [dy.5nav.eu.org](https://dy.5nav.eu.org)
- ⚡ **镜像站** - [dy.5nav.pp.ua](https://dy.5nav.pp.ua)
喜欢完全控制？你也可以自托管 EmbyX 应用。
## 📢 广而告之
如果 EmbyX 让你的数字生活变得更轻松，请分享给你的朋友或在社交媒体上推荐它！作为一名独立开发者，你的口碑是帮助这个项目成长最好的方式。
> 喜欢这个项目吗？[欢迎打赏支持！](#❤️-支持项目)
---
## 🔮 播放性能
@@ -45,91 +58,48 @@
---
## 🧩 使用技巧
- **原生全屏**：iOS 系统限制，不支持全屏按钮
- **PWA 应用**：浏览器 📲 添加到主屏幕 / 作为应用安装
- **键鼠适配**：电脑、电视浏览器也能快乐摸鱼
- **媒体库建议**：单个媒体库建议不超过 **1000 个视频**，可建立多个媒体库分层管理
---
## 🛠️ 技术栈
| 层级 | 技术 |
|---|---|
| **结构** | HTML5 语义化标签 |
| **样式** | Tailwind CSS（CDN，JIT 按需） |
| **逻辑** | 原生 JavaScript（无框架） |
| **图标** | Lucide Icons（CDN） |
| **数据** | Emby REST API |
| **离线支持** | Service Worker（PWA） |
| **容器** | Nginx Alpine（Docker 部署时） |
---
## 📁 文件目录
```
embyx/
├── index.html # 核心文件，包含所有逻辑与样式
├── poster.webp # 自定义默认封面图（可替换）
├── manifest.json # PWA 配置文件
├── sw.js # Service Worker（离线缓存）
├── icon.png # PWA 图标
├── zh/ # 中文版资源
├── en/ # 英文版资源
├── README.md # 英文说明文档 (默认)
├── README_zh.md # 中文说明文档
├── Dockerfile # Docker 镜像构建文件
└── docker-compose.yml # 一键部署配置
├── docker-compose.yml # Docker Compose 配置文件
├── entrypoint.sh # Docker 启动脚本
└── nginx.conf # Nginx 配置文件
```
---
## 🚀 部署方式
### 方式一：直接部署（推荐个人用户）
### 方式一：直接托管（推荐）
将以下文件放入任意 Web 服务器（Nginx、Apache、NAS 静态服务等）根目录：
只需将 `zh/` 文件夹中的所有文件放入你的 Web 服务器（Nginx、Apache 等）根目录即可。
```
index.html
poster.webp
manifest.json
sw.js
icon.png
```
### 方式二：飞牛应用
> **尝鲜玩法**：手机可以直接双击 `index.html`（file:// 协议）本地使用，通过 HTTP 访问 Emby。
EmbyX 即将上架飞牛商店（审核中），加入交流群可下载 fpk 文件手动安装。
---
### 方式三：Docker 部署
### 方式二：Docker 部署
#### 使用 Docker
如果你不想折腾 Web 环境，可以使用 Docker 快速部署。
#### 使用 Docker:
```bash
# 拉取最新镜像
docker pull ghcr.io/juneix/embyx:latest
# 运行容器（映射到本机 8080 端口）
docker run -d \
--name embyx \
--network host \
-e APP_LANG=zh \
-e APP_PORT=8090 \
--restart unless-stopped \
ghcr.io/juneix/embyx:latest
```
访问 `http://your-server-ip:8080` 即可使用。
#### 使用 docker-compose（推荐）
```bash
# 下载 docker-compose.yml 后执行
docker compose up -d
```
或者直接复制到群晖、飞牛、Dockge 的 docker-compose 模板：
```bash
#### 使用 Docker Compose:
```yaml
services:
embyx:
image: ghcr.io/juneix/embyx:latest
@@ -137,14 +107,27 @@ services:
restart: unless-stopped
network_mode: host
environment:
- APP_LANG=zh # zh (中文), en (英文)
- APP_PORT=8090 # 在 host 模式下，直接定义访问端口
- APP_LANG=zh # 中文版
- APP_PORT=8090 # 访问端口
```
---
## ❤️ 支持项目
- 打赏鼓励：支持我开发更多有趣应用
- 互动群聊：加入 💬 [QQ 群](mqqapi://card/show_pslcard?src_type=internal&version=1&uin=646913307&card_type=group&source=qrcode)可在线催更
- 更多内容：访问 ➡️ [谢週五の藏经阁](https://5nav.eu.org)
<div align="center">
<div style="display: inline-block; margin: 10px;">
<img src="./zh/wechat.webp" width="128" />
<br/><sub>微信</sub>
</div>
<div style="display: inline-block; margin: 10px;">
<img src="./zh/alipay.webp" width="128" />
<br/><sub>支付宝</sub>
</div>
</div>
## 📝 开源协议
MIT License — 随意使用，欢迎 PR 和 Issue。
👨🏻‍💻 作者：[@谢週五](https://juneix.github.io)
🛜 官网：[谢週五の藏经阁](https://5nav.eu.org)
en/index.html
+33 -38
View File
@@ -1,7 +1,7 @@
<!--
EmbyX - Short Video Player for Emby
© 2026 谢週五 (https:
著作权所有·设计与开发
Juneix (https://github.com/juneix)
© 2026 All Rights Reserved
-->
<!DOCTYPE html>
<html lang="zh-CN">
@@ -40,13 +40,10 @@
</script>
<style type="text/tailwindcss">
@layer utilities {
/* Styles */
.video-fullscreen {
@apply w-full h-full absolute inset-0 z-10;
}
/* Styles */
/* Styles */
.slide-container {
@apply relative w-screen overflow-hidden bg-black;
height: 100dvh;
@@ -57,12 +54,10 @@
}
}
/* Styles */
.slide-item {
@apply absolute top-0 left-0 w-full h-full z-10;
}
/* Styles */
.play-pause-btn {
@apply absolute top-1/2 left-1/2 w-16 h-16 rounded-full flex items-center justify-center z-20 opacity-0 pointer-events-none transition-all duration-200 ease-out bg-black/30;
transform: translate(-50%, -50%) scale(1.5);
@@ -75,7 +70,6 @@
@apply text-2xl text-white;
}
/* Styles */
.interface-hidden .bottom-info,
.interface-hidden .bottom-nav,
.interface-hidden .right-toolbar,
@@ -84,7 +78,6 @@
@apply opacity-0 pointer-events-none transition-opacity duration-300;
}
/* Styles */
.grid-active .bottom-info,
.grid-active .right-toolbar,
.grid-active #fullscreenBtn,
@@ -92,12 +85,10 @@
@apply opacity-0 pointer-events-none transition-opacity duration-300;
}
/* Styles */
.focusable-item:focus {
@apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-black z-20;
}
/* Styles */
.profile-layer {
@apply fixed top-0 left-0 w-full h-full z-[60] translate-y-full transition-transform duration-300 ease-in-out;
}
@@ -105,12 +96,10 @@
@apply translate-y-0;
}
/* Styles */
.progress-line {
@apply h-full bg-white transition-[width] duration-100 ease-linear;
}
/* Styles */
.nav-btn {
@apply relative flex flex-col items-center justify-center w-1/4 h-full cursor-pointer transition-colors duration-300 z-10;
-webkit-tap-highlight-color: transparent;
@@ -293,7 +282,7 @@
<div class="space-y-4 bg-gray-800/40 p-4 rounded-lg border border-gray-700/50">
<div>
<label class="text-gray-400 text-xs block mb-1.5">Server URL</label>
<input type="text" id="configServer" placeholder="* Use HTTPS for online web ver."
<input type="text" id="configServer" placeholder="Use HTTPS for remote connections"
class="w-full bg-gray-900 text-white text-sm rounded px-3 py-2.5 outline-none border border-gray-700 focus:border-primary transition-colors focusable-item">
</div>
<div class="grid grid-cols-2 gap-2">
@@ -358,28 +347,26 @@
<div class="flex items-center">
<h3 class="text-white font-bold text-2xl tracking-tight">📱 EmbyX</h3>
<span
class="ml-2 px-2 py-0.5 bg-primary/20 text-primary text-xs font-bold rounded-full border border-primary/30">v1.1</span>
class="ml-2 px-2 py-0.5 bg-primary/20 text-primary text-xs font-bold rounded-full border border-primary/30">v1.0</span>
</div>
<div>
<p class="text-gray-300">👋 Hi, I am <a href="https://juneix.github.io" target="_blank"
class="text-primary hover:underline">@Juneix</a>. EmbyX is a web-native
application designed specifically for Emby/Jellyfin. It perfectly recreates the
immersive short-video interactive experience, giving your private media library a
brand-new way to browse. 🎉</p>
<p class="text-gray-300">👋 Hi, I am <a href="https://github.com/juneix" target="_blank"
class="text-primary hover:underline">@Juneix</a>. EmbyX is a TikTok-style web
player for Emby / Jellyfin. Experience your private media library in a whole new,
immersive way. 🎉</p>
</div>
<div
class="text-yellow-500/90 text-xs bg-yellow-500/10 p-3 rounded-lg border border-yellow-500/20">
<i data-lucide="alert-triangle" class="w-3 h-3 mr-1 inline"></i>
Notice: All data stays local; open-source for self-hosting.
<i data-lucide="shield-check" class="w-3 h-3 mr-1 inline"></i>
All data stays on your device. Free to use.
</div>
<div>
<h4 class="text-gray-300">🔮 Playback</h4>
<ul class="list-disc list-inside space-y-1 text-gray-400 text-xs">
<li>Native HTML5 player, best on modern devices.</li>
<li>Enjoy smooth 8K AV1 videos on Android ➕ Direct Play.</li>
<li>Older devices can use server transcoding.</li>
</ul>
<div class="bg-black/40 rounded-lg overflow-hidden border border-gray-700/50 mt-3">
@@ -424,8 +411,8 @@
<h4 class="text-gray-300">🧩 Tips & Tricks</h4>
<ul class="list-disc list-inside space-y-1 text-gray-400 text-xs">
<li>Setup: Use a dedicated account; < 1,000 videos per library.</li>
<li>PWA: 📲 Add to Home Screen or Install as App on any browser.</li>
<li>Controls: Full Mouse, Keyboard, and Remote support for PC & TV.</li>
<li>PWA: 📲 Add to Home Screen or Install as App.</li>
<li>Controls: Full Mouse, Keyboard support for PC & TV.</li>
</ul>
</div>
@@ -448,7 +435,7 @@
<tr>
<td class="px-3 py-1.5 text-primary border-r border-gray-700/50">A / D /
← / →</td>
<td class="px-3 py-1.5">Rewind / Fast-fw 15s</td>
<td class="px-3 py-1.5">Rewind / Forward 15s</td>
</tr>
<tr>
<td class="px-3 py-1.5 text-primary border-r border-gray-700/50">Space /
@@ -477,7 +464,7 @@
</tr>
<tr>
<td class="px-3 py-1.5 text-primary border-r border-gray-700/50">E</td>
<td class="px-3 py-1.5">Toggle View Mode</td>
<td class="px-3 py-1.5">Toggle View</td>
</tr>
<tr>
<td class="px-3 py-1.5 text-primary border-r border-gray-700/50">R</td>
@@ -502,18 +489,27 @@
</div>
<div>
<h4 class="text-gray-300">🚀 Support</h4>
<h4 class="text-gray-300">🚀 Get Involved</h4>
<ul class="list-disc list-inside space-y-1 text-gray-400 text-xs mt-3">
<li><span class="text-gray-300 font-medium">Support Me:</span> Help me develop more
cool tools.</li>
<li><span class="text-gray-300 font-medium">Community:</span> Follow the latest
updates.</li>
<li><span class="text-gray-300 font-medium">Support:</span> Help me build more cool
stuff.</li>
</ul>
<div class="flex justify-start space-x-3 mt-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mt-4">
<a href="https://x.com/juneix_tse" target="_blank"
class="flex items-center justify-center text-white bg-white/10 hover:bg-white/20 px-3 py-1.5 rounded-full transition-colors border border-white/20 text-[10px] whitespace-nowrap">
<i data-lucide="twitter"
class="w-3.5 h-3.5 mr-1.5 grayscale brightness-200"></i> X / Twitter</a>
<a href="https://t.me/juneix_en" target="_blank"
class="flex items-center justify-center text-[#26A5E4] bg-[#26A5E4]/10 hover:bg-[#26A5E4]/20 px-3 py-1.5 rounded-full transition-colors border border-[#26A5E4]/20 text-[10px] whitespace-nowrap">
<i data-lucide="send" class="w-3.5 h-3.5 mr-1.5"></i> Telegram</a>
<a href="https://ko-fi.com/juneixtse" target="_blank"
class="flex items-center text-primary bg-primary/10 hover:bg-primary/20 px-3 py-1.5 rounded-full transition-colors border border-primary/20">☕
Ko-fi</a>
class="flex items-center justify-center text-[#FF5E5B] bg-[#FF5E5B]/10 hover:bg-[#FF5E5B]/20 px-3 py-1.5 rounded-full transition-colors border border-[#FF5E5B]/20 text-[10px] whitespace-nowrap">
<i data-lucide="coffee" class="w-3.5 h-3.5 mr-1.5"></i> Ko-fi</a>
<a href="https://paypal.me/juneixtse" target="_blank"
class="flex items-center text-[#ffc439] bg-[#ffc439]/10 hover:bg-[#ffc439]/20 px-3 py-1.5 rounded-full transition-colors border border-[#ffc439]/20">💳
PayPal</a>
class="flex items-center justify-center text-[#ffc439] bg-[#ffc439]/10 hover:bg-[#ffc439]/20 px-3 py-1.5 rounded-full transition-colors border border-[#ffc439]/20 text-[10px] whitespace-nowrap">
<i data-lucide="credit-card" class="w-3.5 h-3.5 mr-1.5"></i> PayPal</a>
</div>
</div>
@@ -687,7 +683,7 @@
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Emby-Authorization': `Emby Client="EmbyX", Device="Web", DeviceId="EmbyX-Device", Version="1.1"`
'X-Emby-Authorization': `Emby Client="EmbyX", Device="Web", DeviceId="EmbyX-Device", Version="1.0"`
},
body: JSON.stringify({ Username: user, Pw: pwd })
});
@@ -851,7 +847,6 @@
}
}
/* Styles */
renderSlides() {
this.dom.videoContainer.innerHTML = '';
this.dom.videoContainer.className = 'relative w-full h-full transition-transform duration-300 ease-out';
@@ -2530,6 +2525,6 @@
</html>
<!--
End of EmbyX.
Discover more: June's Hub (https://5nav.eu.org)
Made with ❤️ by Juneix (https://github.com/juneix)
Keep Coding, Keep Fun.
-->
index.html
-21
View File
@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EmbyX - Loading...</title>
<script>
(function() {
var lang = navigator.language || navigator.userLanguage;
if (lang.toLowerCase().indexOf('zh') !== -1) {
window.location.href = './zh/';
} else {
window.location.href = './en/';
}
})();
</script>
</head>
<body style="background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif;">
<p>Redirecting / 正在跳转...</p>
</body>
</html>
zh/index.html
+10 -12
View File
@@ -299,7 +299,7 @@
<div class="space-y-4 bg-gray-800/40 p-4 rounded-lg border border-gray-700/50">
<div>
<label class="text-gray-400 text-xs block mb-1.5">服务器地址</label>
<input type="text" id="configServer" placeholder="非局域网请使用 https 协议*"
<input type="text" id="configServer" placeholder="非局域网请使用 HTTPS"
class="w-full bg-gray-900 text-white text-sm rounded px-3 py-2.5 outline-none border border-gray-700 focus:border-primary transition-colors focusable-item">
</div>
<div class="grid grid-cols-2 gap-2">
@@ -372,22 +372,19 @@
<div>
<p class="text-gray-300">👋 Hi～我叫<a href="https://juneix.github.io" target="_blank"
class="text-primary hover:underline">@谢週五</a>，EmbyX 是一款专为 Emby / Jellyfin 打造的
Web 原生应用，完美复刻短视频沉浸式交互，让你的私人媒体库焕发全新的刷片体验。🎉</p>
Web 原生应用，完美复刻抖音·短视频沉浸式交互，让你的私人媒体库焕发全新的刷片体验。🎉</p>
</div>
<div
class="text-yellow-500/90 text-xs bg-yellow-500/10 p-3 rounded-lg border border-yellow-500/20">
<i data-lucide="alert-triangle" class="w-3 h-3 mr-1 inline"></i>
提醒：数据本地存储，不上传云端；项目开源，可私有化部署。
<i data-lucide="shield-check" class="w-3 h-3 mr-1 inline"></i>
数据全程保存在本地，完全免费。
</div>
<div>
<h4 class="text-gray-300">🔮 播放性能</h4>
<ul class="list-disc list-inside space-y-1 text-gray-400 text-xs">
<li>原生 HTML5 播放器，新设备体验最佳</li>
<li>直接播放 <code
class="bg-gray-700 px-1 rounded text-xs text-gray-200"> Direct Play</code>，安卓
8K、AV1 不转码</li>
<li>老设备需服务器转码，<del>不如放到**上回收了(没打钱</del>😂</li>
</ul>
<div class="bg-black/40 rounded-lg overflow-hidden border border-gray-700/50 mt-3">
@@ -428,8 +425,8 @@
<h4 class="text-gray-300">🧩 使用技巧</h4>
<ul class="list-disc list-inside space-y-1 text-gray-400 text-xs">
<li>配置建议：新建专用账号，每个媒体库 < 1000 个视频</li>
<li>PWA应用：全平台浏览器 📲 添加到主屏幕/作为应用安装</li>
<li>键鼠适配：电脑、电视浏览器也能快乐摸鱼</li>
<li>PWA应用：📲 添加到主屏幕/作为应用安装</li>
<li>键鼠适配：纯按键控制，电脑、电视轻松摸鱼</li>
</ul>
</div>
@@ -517,13 +514,14 @@
<div class="flex justify-center space-x-3 mt-4">
<a href="weixin://profile/gh_86f7c0a73738">
<div class="flex flex-col items-center">
<img src="/wechat.webp" alt="微信" class="w-24 h-24 object-cover rounded">
<img src="wechat.webp" alt="微信" class="w-24 h-24 object-cover rounded">
<span class="text-[10px] text-gray-400 mt-1">微信</span>
</div>
</a>
<a href="alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=https%3A%2F%2Fqr.alipay.com%2Ffkx15248wilbz2ddz96og40">
<a
href="alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=https%3A%2F%2Fqr.alipay.com%2Ffkx15248wilbz2ddz96og40">
<div class="flex flex-col items-center">
<img src="/alipay.webp" alt="支付宝" class="w-24 h-24 object-cover rounded">
<img src="alipay.webp" alt="支付宝" class="w-24 h-24 object-cover rounded">
<span class="text-[10px] text-gray-400 mt-1">支付宝</span>
</div>
</a>