72QishierPlayer

一个基于 Vue3 + Vite + Node.js + Playwright + HLS.js 的《七十二家房客》在线播放项目。

本项目通过 浏览器自动采集官网数据 → 本地缓存 JSON → Node API 提供 → Vue 前端播放 的方式，解决官网接口 签名、401、分页限制 等问题，实现稳定播放。

---

项目特点

• 自动采集《七十二家房客》节目列表
• 自动滚动加载更多节目
• 自动去重并缓存到 JSON
• Node API 提供数据
• Vue3 播放器展示
• HLS.js 播放 m3u8 视频
• Cookie 记录上次观看进度
• 前端分页加载，避免一次加载过多图片

---

运行&安装

一、后端

安装后端依赖

npm i

开启后端服务

node server.js

如需更新数据：

node capture.js

二、前端

1 安装前端依赖

npm i

运行前端服务：

npm run dev

---

2 安装后端依赖

进入后端目录：

cd backServer

安装依赖：

npm install

安装 Playwright 浏览器：

npx playwright install chromium

---

运行项目

1 采集节目数据

npm run capture

程序会自动：

1. 启动浏览器
2. 打开页面

https://www1.gdtv.cn/tvColumn/768

3. 自动滚动页面
4. 自动点击 加载更多
5. 捕获接口数据
6. 写入缓存

缓存文件：

backServer/data/qishier-cache.json

---

2 启动 Node API

在 backServer 目录运行：

npm run server

API 地址：

http://localhost:3000/api/qishier/all

返回示例：

{
  "total": 1141,
  "list": []
}

---

3 启动 Vue 前端

回到项目根目录：地址：http://localhost:5173

npm run dev

---

项目架构

官网接口
gdtv-api.gdtv.cn
│
▼
Playwright 浏览器采集
│
▼
本地 JSON 缓存
backServer/data/qishier-cache.json
│
▼
Node API
http://localhost:3000/api/qishier/all
│
▼
Vue 播放器
http://localhost:5173

---

项目目录

72QishierPlayer
│
├─ src
│  ├─ api
│  │   └─ qishier.ts
│  │
│  ├─ views
│  │   └─ QishierPlayer.vue
│  │
│  ├─ App.vue
│  ├─ main.ts
│  └─ assets
│
├─ backServer
│  │
│  ├─ data
│  │   └─ qishier-cache.json
│  │
│  ├─ capture.js
│  ├─ server.js
│  └─ package.json
│
├─ vite.config.ts
└─ package.json

---

播放器功能

播放器支持：

• m3u8 视频播放
• HLS.js 播放器
• 节目列表分页加载
• 懒加载封面图
• 自动播放
• 自动恢复观看进度

观看记录存储在 Cookie：

qishier_last_episode

刷新页面会自动恢复上次观看。

---

数据缓存机制

缓存文件：

backServer/data/qishier-cache.json

缓存策略：

• 新数据自动追加
• 根据 id 自动去重
• 避免重复节目

---

技术栈

前端：

• Vue 3
• Vite
• TypeScript
• Axios
• HLS.js

后端：

• Node.js
• Express
• Playwright

数据：

• JSON 本地缓存

---

免责声明

本项目仅用于：

• 技术学习
• 数据采集研究
• 视频播放技术演示

请勿用于商业用途。