124 lines
3.4 KiB
Markdown
124 lines
3.4 KiB
Markdown
# 🎬 IPTV Web 核心
|
||
|
||
基于 Vue 3 + Vite 的 IPTV 播放器，支持 iptv-api 格式数据源和 XMLTV EPG 节目单。
|
||
|
||
## 功能特性
|
||
|
||
| 功能 | 状态 | 说明 |
|
||
|------|:--:|------|
|
||
| 🎥 **视频播放** | ✅ | HLS (m3u8) 支持，hls.js |
|
||
| 📡 **IPTV 源** | ✅ | 支持 iptv-api TXT/M3U 格式 |
|
||
| 🔍 **频道搜索** | ✅ | 实时搜索过滤 |
|
||
| 🗂️ **分组筛选** | ✅ | 按分组浏览频道 |
|
||
| ⭐ **收藏功能** | ✅ | LocalStorage 本地存储 |
|
||
| 🕐 **播放历史** | ✅ | 最近 50 条 |
|
||
| 🔗 **多源管理** | ✅ | 自动合并重复频道，切换源 |
|
||
| ⚡ **延迟检测** | ✅ | 在线检测，按延迟排序 |
|
||
| 📺 **EPG 节目单** | ✅ | XMLTV 格式，2小时缓存 |
|
||
| ⚙️ **配置面板** | ✅ | 数据源、EPG、播放器设置 |
|
||
|
||
## 数据源格式
|
||
|
||
### IPTV 源 (TXT 格式 - iptv-api 默认)
|
||
|
||
```
|
||
央视频道,#genre#
|
||
CCTV-1 综合,http://xxx
|
||
CCTV-2 财经,http://yyy
|
||
|
||
卫视频道,#genre#
|
||
湖南卫视,http://xxx
|
||
```
|
||
|
||
### EPG 源 (XMLTV 格式)
|
||
|
||
```xml
|
||
<?xml version="1.0" encoding="UTF-8"?>
|
||
<tv>
|
||
<programme channel="1" start="20240204120000 +0800" stop="20240204130000 +0800">
|
||
<title>新闻30分</title>
|
||
<desc>午间新闻</desc>
|
||
<category>新闻</category>
|
||
</programme>
|
||
</tv>
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
浏览器打开 http://localhost:5173
|
||
|
||
## 配置说明
|
||
|
||
点击右上角 ⚙️ 打开配置面板：
|
||
|
||
### 直播源
|
||
- **Guovin/iptv-api**: 默认 CDN 地址
|
||
- **本地文件**: `public/api/result.txt`（开发测试）
|
||
- **自定义接口**: 输入远程 API 地址
|
||
|
||
### EPG 节目单
|
||
- **本地文件**: `public/api/epg.xml`（开发测试）
|
||
- **自定义接口**: 输入 XMLTV 格式 EPG 地址
|
||
- 自动缓存 2 小时，避免频繁请求
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
web/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ ├── VideoPlayer.vue # 视频播放器
|
||
│ │ ├── EPGGuide.vue # EPG 节目单展示
|
||
│ │ ├── QuickAccess.vue # 收藏/历史快捷入口
|
||
│ │ ├── SourceSelector.vue # 多源选择器
|
||
│ │ └── ConfigPanel.vue # 配置面板
|
||
│ ├── stores/
|
||
│ │ └── useStore.js # 状态管理
|
||
│ ├── utils/
|
||
│ │ ├── m3uParser.js # M3U 解析
|
||
│ │ ├── txtParser.js # TXT 解析 (iptv-api)
|
||
│ │ ├── channelOptimizer.js # 频道去重、延迟检测
|
||
│ │ └── epgFetcher.js # EPG 获取和解析
|
||
│ ├── App.vue
|
||
│ └── main.js
|
||
├── public/
|
||
│ └── api/
|
||
│ ├── result.txt # 示例 IPTV 源
|
||
│ └── epg.xml # 示例 EPG 数据
|
||
└── package.json
|
||
```
|
||
|
||
## 核心功能实现
|
||
|
||
### 1. 频道去重与多源
|
||
```javascript
|
||
// 合并相同频道的多个源
|
||
channels.value = mergeChannels(rawChannels.value)
|
||
// 结果: [{name: 'CCTV-1', sources: [{url: 'xxx'}, {url: 'yyy'}]}]
|
||
```
|
||
|
||
### 2. 延迟检测
|
||
```javascript
|
||
// 并发检测 5 个源
|
||
await checkAllChannels(channels.value, 5, onProgress)
|
||
// 自动排序：在线的优先，按延迟从小到大
|
||
```
|
||
|
||
### 3. EPG 缓存
|
||
```javascript
|
||
// 获取 EPG，带 2 小时缓存
|
||
const epgData = await fetchEPG('/api/epg.xml')
|
||
// 自动解析 XMLTV，按频道分组
|
||
```
|
||
|
||
## 下一步
|
||
|
||
- 🖥️ **Tauri 桌面端** - Windows/Mac 可执行文件
|
||
- 📱 **Android 套壳** - WebView + ExoPlayer
|
||
- 🔶 **HarmonyOS 套壳** - Web 组件
|