https://github.com/netcan/video-player
简易网页播放器示例，自动解析 HLS (m3u8) 多码率流，提供画质切换，兼容 HEVC/HDR 以及 iPhone Safari 原生播放。本项目由 AI 助手（ChatGPT，Codex 模式）独立开发构建，包含 UI、播放器逻辑与文档内容。
https://github.com/netcan/video-player
Last synced: about 1 month ago
JSON representation
简易网页播放器示例，自动解析 HLS (m3u8) 多码率流，提供画质切换，兼容 HEVC/HDR 以及 iPhone Safari 原生播放。本项目由 AI 助手（ChatGPT，Codex 模式）独立开发构建，包含 UI、播放器逻辑与文档内容。
- Host: GitHub
- URL: https://github.com/netcan/video-player
- Owner: netcan
- Created: 2025-10-21T14:22:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-22T12:54:54.000Z (8 months ago)
- Last Synced: 2025-12-29T02:55:42.266Z (6 months ago)
- Language: JavaScript
- Homepage: https://zhiyb.me/hls/nvp/?key=tingfm_58
- Size: 104 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# 视频流播放器
简易网页播放器示例，自动解析 HLS (m3u8) 多码率流，提供画质切换，兼容 HEVC/HDR 以及 iPhone Safari 原生播放。
在线演示：https://zhiyb.me/hls/nvp/?key=tingfm_58
> 本项目由 AI 助手（ChatGPT，Codex 模式）独立开发构建，包含 UI、播放器逻辑与文档内容。
## 功能
- 自动抓取播放列表的码率、分辨率、HDR/HEVC 信息，生成画质选项。
- `hls.js`（浏览器支持 MSE 时）和 Safari 原生 HLS 双模式。
- 手动切换画质或保持自动自适应。
- 重新载入按钮，便于调试流。
- 页面内可输入自定义 m3u8 地址，并可一键切换是否走本地代理。
- 纯音频流会自动尝试匹配同名图片作为封面（例如 `*.m3u8` → `*.png` 或 `hls_fm` → `hls_data`）。
- 支持通过 URL 参数 `?src=` 指定自定义流地址。
- 若播放源未配置 CORS，播放器会提示并退回“自动画质”模式，仍可正常播放。
## 使用方式
1. 启动内置服务器（同时提供静态文件与 CORS 代理）：
```bash
node server.js
```
默认监听 `http://localhost:3000`。
2. 浏览器访问 `http://localhost:3000`，即可播放默认 HEVC/HDR 示例流。
3. 支持两种输入方式：
- **直接粘贴 m3u8 地址**：点击“播放”即可加载。
- **仅输入 key（如 `tingfm_58`）**：播放器会按顺序尝试 `-hevc`, `hls_ffmpeg`, `hls_data`, `hls_fm` 四类地址，并设置 `https://zhiyb.me/hls_data/$key.png` 为封面。若检测到 HEVC，会额外提供 SDR 选项。
4. 播放源设置在移动端默认折叠，可展开卡片后编辑；桌面端默认展开。
5. 页面上的“流类型”下拉框会列出可用源（音频、数据源等），HDR/SDR 画质会直接出现在播放器画质选择里。
6. 底部控件提供“重新载入”与“宽屏”按钮；“宽屏”会将播放器拉伸至整页宽度，再次点击恢复。
7. 仍可通过地址栏参数 `?src=` 指定初始流或使用 `?key=` 指定初始 key；若需禁用代理，在地址栏或表单里取消勾选，或加 `&proxy=0`。
### Key 模式规则
当输入框内容匹配 `^[A-Za-z0-9_-]+$` 时，会启用 key 模式并按照以下逻辑执行：
1. 依次探测并记录可用的播放源：
- `https://zhiyb.me/hls_ffmpeg/${key}-hevc.m3u8`
- `https://zhiyb.me/hls_ffmpeg/${key}.m3u8`
- `https://zhiyb.me/hls_data/${key}.m3u8`
- `https://zhiyb.me/hls_fm/${key}.m3u8`
2. 任意源可访问即加入“流类型”下拉框；若检测到 HEVC/SDR 组合，会出现“HDR (HEVC)”与“SDR (AVC)”选项方便切换。
3. 封面图片默认从 `https://zhiyb.me/hls_data/${key}.png` 获取，若代理开启则自动走 `/proxy/` 以解决 CORS；纯音频流会保持方形布局并继续尝试同名 `.jpg/.jpeg/.webp`。
4. 地址栏会同步更新 `?key=...` 和 `?variant=` 参数，刷新后可直接恢复同一 key 与流类型。
## 跨域说明
- 默认情况下，所有非同源的 `m3u8` 流和分片请求都会通过 `/proxy/...` 转发，自动带上允许跨域的响应头，解决 Chrome/Edge 的 CORS 限制。
- 在支持 HEVC/HDR 的 Safari（含 iPhone/iPad）上，即使不使用代理也能播放；如果想强制直连，可加 `proxy=0`。
- 若目标流本身提供完整的 CORS 头，也可选择不代理以减少跳转。
## 测试说明
- 推荐在支持 HEVC/HDR 的 Safari（特别是 iPhone 或 Apple Silicon Mac）验证效果。
- 在 Chrome/Edge 等浏览器中，会使用 `hls.js`，仅能播放非 HEVC 轨道；若播放失败，请切换至 Safari。
- 网络断开或媒体错误时，播放器会在状态栏提示，可通过“重新载入”按钮恢复。