ahxin/72QishierPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity
72QishierPlayer/README.md
云上贵猪 c7f6d6b2b1 七十二家房客-观看平台v1.5 
- 更改播放器
 - 优化自动播放
2026-03-11 07:56:01 +08:00

6.2 KiB
Raw Blame History

72QishierPlayer 技术栈说明

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

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

运行与安装指南

本文档说明 72QishierPlayer 项目的安装与运行步骤。
项目由 Node.js 后端 + Vue3 前端 两部分组成，需要分别启动。

一、后端服务（Node.js）

后端主要负责：

  • 提供节目 API
  • 读取本地 JSON 数据
  • 提供给前端播放列表

1. 安装依赖

进入后端目录：

cd backServer

安装依赖：

npm install

2. 启动后端服务

node server.js

默认接口地址：

http://localhost:3000

例如：

http://localhost:3000/api/qishier/list

3. 更新节目数据（可选）

如果需要重新采集节目数据：

node capture.js

该脚本会：

  1. 启动浏览器自动采集
  2. 打开节目页面
  3. 自动加载更多节目
  4. 捕获接口数据
  5. 更新本地缓存

数据保存位置：

backServer/data/qishier-cache.json

二、前端服务（Vue3）

前端负责：

  • 视频播放器
  • 节目列表展示
  • 自动下一集
  • 播放进度记录

1. 安装前端依赖

进入前端目录：

cd 72QishierPlayer

安装依赖：

npm install

2. 启动前端开发服务器

npm run dev

默认访问地址：

http://localhost:5173

三、开发模式运行流程

建议的启动顺序：

1. 启动 Node 后端
node server.js

2. 启动 Vue 前端
npm run dev

3. 浏览器访问
http://localhost:5173

四、生产环境部署

构建前端：

npm run build

构建完成后生成：

dist/

将 dist 部署到 Nginx 或静态服务器即可。

后端服务建议使用 PM2 运行：

pm2 start server.js --name qishier-api
pm2 save

五、常见问题

1. 播放器无法播放

确认：

  • 后端服务已启动
  • API 地址正常
  • m3u8 视频链接有效

2. 没有节目数据

执行：

node capture.js

重新采集节目列表。

六、默认端口

服务 端口

Vue 前端 5173 Node API 3000

技术栈（Tech Stack）

前端

技术 说明

Vue3 前端框架 Vite 前端构建工具 TypeScript 类型安全开发 Axios HTTP 请求库 Artplayer 视频播放器 UI hls.js m3u8 / HLS 视频流播放 HTML5 Video 浏览器视频播放能力 CSS3 页面样式

后端

技术 说明

Node.js 后端运行环境 Express API 服务 Playwright 浏览器自动化采集 JSON 数据缓存存储

数据采集

技术 说明

Playwright 自动打开官网页面 浏览器接口拦截 捕获节目 API 自动滚动 加载更多节目 JSON缓存 本地节目数据存储

视频播放技术

技术 说明

HLS (HTTP Live Streaming) 视频流协议 hls.js 浏览器 HLS 解码 Artplayer 视频播放器 UI 控件

项目架构

官网接口
gdtv-api.gdtv.cn
        │
        ▼
Playwright 浏览器采集
        │
        ▼
本地 JSON 缓存
backServer/data/qishier-cache.json
        │
        ▼
Node API
/api/qishier/*
        │
        ▼
Vue3 前端
Artplayer + HLS

核心功能

功能 技术实现

自动采集节目 Playwright 数据缓存 JSON API 服务 Express 视频播放 Artplayer + hls.js 自动下一集 Vue 状态管理 顺序 / 倒序播放 列表排序 播放进度记录 Cookie 懒加载节目列表 前端分页 组件化架构 Vue Components

运行环境

环境 版本

Node.js ≥ 18 npm ≥ 9 浏览器 Chrome / Edge / Safari 操作系统 macOS / Linux / Windows

项目目录结构

72QishierPlayer
│
├─ src
│  ├─ api
│  │   └─ qishier.ts
│  │
│  ├─ components
│  │   └─ qishier
│  │       ├─ QishierVideoPlayer.vue
│  │       └─ QishierEpisodeList.vue
│  │
│  ├─ views
│  │   └─ QishierPlayer.vue
│  │
│  └─ utils
│      └─ playHistory.ts
│
├─ backServer
│  ├─ data
│  │   └─ qishier-cache.json
│  │
│  ├─ capture.js
│  └─ server.js
│
├─ vite.config.ts
└─ package.json