正在播放

页面38-course-play.html · 单节视频播放 · 验收见 ⑧ · 分工见 ⓪

阅读方式：每条先写界面上是什么，再写元素 ID 与接口。

展示顺序（按角色 · 章节号固定）

• 产品 / 老板：⓪ → ①～⑤ → ⑧
• 测试：⑧ → ①～⑤ → ⑦
• 研发：接口速查 → ①～⑤ → ⑥ → ⑦
• UI：①～⑤（图标路径在控件下）
• 数据 / 增长：⑨ → ⑥
• 多态页：③ 内分态 · ⑥⑦⑧⑨ 号不变

接口本页唯一 · GET /courses/{course_id}/chapters/{chapter_id}/playback → display_course_player · 原型 mock · 完整见 ⑥

⓪ 本页做什么 · 分工速查

一句话：单节课程视频全屏播放；上线用腾讯云点播 TCPlayer；后台 CMS 上传维护 file_id。

• 产品 / 老板：⑧ · 列表→详情→播放三跳闭环
• 测试：⑧ 含跨页路径 · 播放器区非空 · 联调见 ⑥
• UI：16:9 播放器 + 课时标题 + 返回详情
• 前端：TCPlayer SDK · URL 带 course_id · chapter_id · 详 ⑥
• 后端：CMS 上传视频 · 本接口返回 app_id · file_id · psign · 详 ⑥
• 合规：平台托管内容 · 非外链跳转为主路径

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 21-course-detail.html?course_id=
• 「正在播放」 · 小字标题 → page_title

② 播放器 · 主内容上部

• 播放器容器 → display_course_player · 16:9 黑底 · 上线 TCPlayer 挂载点
• 原型：HTML 静态 <video> 兜底 · 路径 mp4/22c68da31c79a48861af6d896553f8ce.mp4 · JS COURSE_MOCK_VIDEO.protoSrc · TCPlayer 同路径演示
• 上线：TCPlayer + playback 接口 tcplayer.file_id / psign · 视频源来自后台 CMS 上传

③ 课时信息 · 播放器下方

• 「第1课 透视表快速上手」 → copy_lesson_title · 来自 playback title
• 「12:30 · 视频」 · 灰色小字 → copy_lesson_meta · duration · type
• 「在线观看 · 内容由平台提供」 → copy_course_play_hint

④ 本页无贴底 CTA

播放即主任务 · 返回详情继续目录。

⑤ 本页无多态 Tab

单节播放 · 锁定章节不可从详情进入。

⑥ 课时播放 · GET /courses/{course_id}/chapters/{chapter_id}/playback（本页唯一）

说明：播放器凭证与标题来自本接口；视频文件由 B 端 CMS 上传至腾讯云点播。原型用仓库内静态 mp4 演示播放效果；上线由本接口返回 tcplayer.* 渲染 display_course_player。替换清单 → dev-notes · 静态 mock → API。

• 何时调 · 从 21-course-detail 点「开始学习」或可播章节 · 进页带 course_id · chapter_id
• 鉴权 · 需登录 · 章节 locked=true → 403 · 回详情 Toast
• 响应 → 控件
  • title → copy_lesson_title
  • duration · type → copy_lesson_meta
  • tcplayer.app_id · tcplayer.file_id · tcplayer.psign → 初始化 TCPlayer
• 响应示例（上线 · 原型 mock 字段对齐）
  • { "title": "第1课 透视表快速上手", "duration": "12:30", "type": "video", "tcplayer": { "app_id": "…", "file_id": "…", "psign": "…" } }
• 失败与边界 · 无效 id → 回详情 · 加载骨架 · 播放失败 Toast + 重试

⑦ 入口 · 出口

• 入口：21-course-detail.html · btn_start_course 或 list_course_chapters 可播行
• 出口：顶栏返回 → 详情 · 播完可自动下一节（1.1+ · 后台可配）

⑧ 怎么验收

1. 跨页闭环：20-skill-courses → 点课 → 21 → 点「开始学习」 → 进入本页 · 播放器区非空（可播 mp4 · TCPlayer）。
2. 左右对照：课时标题「第1课 透视表快速上手」须与 ③ 一致。
3. 接口专章：滚到 ⑥ · 可见 playback 路径与 tcplayer.* 字段。
4. 返回：顶栏 → 回 21-course-detail.html。
5. 章节：详情页点第1课行 → 同样进入本页（带 chapter_id）。

⑨ 团队补充

• 图标资产（第二批） · app-image/ICON-CATALOG.md · 全站通用 §7 · 上传 §8 · 品牌 §9 · 本页见 §10 索引表
• 图标资产（第三批） · app-image/ICON-CATALOG.md · 状态栏 §11 · 增长/分享 §12 · 表单/附件 §13 · 法务 §14 · 订单/空态 §15 · 媒体/语音 §16 · 本页见 §10
• 图标资产（第四批） · app-image/ICON-CATALOG.md · F4 模块 §18 · 状态徽章 §19 · 弹窗/加载 §20 · 联系打码 §21 · 折叠/更多 §22 · 文件类型 §23 · 分享装饰 §24 · 账号 §25 · 本页见 §10
• 分期与排期 · 产品/研发见 launch-static-to-api · 开发说明 ②～⑦ 不写「阶段 N」
• 埋点 · course_play_start · course_play_complete
• 原型限制 · 接 API 前播放 mp4/22c68da31c79a48861af6d896553f8ce.mp4 · _course-prototype.js · 正式上线 关 PROTO_COURSE_USE_STATIC_MOCK 接 playback · 链 launch-static-to-api
• 播放器 · 本页已引 TCPlayer SDK · 上线禁止改回纯外链 webview 作为主路径