Skip to content

Latest commit

 

History

History
56 lines (34 loc) · 3.21 KB

T04.md

File metadata and controls

56 lines (34 loc) · 3.21 KB

T04 · Media

由 pnpm docs:lessons 生成;内容源 src/data/advanced.json,合同源 scripts/generate-advanced.mjs。含教师参考答案。前置:10、19、25。

目标与原理

检查播放器状态、事件与日志。HTMLMediaElement 状态、事件和 play() Promise 共同解释加载、策略与播放器逻辑;Media 日志提供另一条证据。

网络与解码

404、MIME、codec、error.code 和 networkState 分别记录。

播放策略

NotAllowedError 不等于资源不存在;本课播放由用户点击且静音。

播放器行为

playing 后紧接 pause 可能是业务监听器;从 Sources 调用栈追查。

交互演示

改变媒体加载和播放状态。改变本课输入条件并预测结果;对照请求、状态或约束的关系;切换最小修复并复位,核对改变的范围。综合题先提交判断再解锁因果模型,所有模型不计完成。

商城实战

商品演示无法加载,或已播放却被脚本立刻暂停。

  1. 运行故障后主动点击播放;本地 canvas 录制短视频作为无外网素材。
  2. 打开 Media 选择本页播放器,检查 Properties、Events、Messages / Timeline(随版本)。
  3. 把 Network 的资源结果、video.error 与 play() Promise 对应。
  4. 区分加载失败、浏览器策略拒绝和业务暂停,不通过关闭浏览器保护排错。
  5. 应用对照,再点击播放并观察 currentTime 推进;浏览器不支持 MediaRecorder 时记录限制。
  6. 停止后暂停播放器、停止录制 tracks 并撤销本页 Blob URL。

独立挑战与参考答案

区分加载、策略与播放器逻辑。新输入与两种故障随机;可能再次抽到同种,不保证轮流。

配置 根因 实际证据 针对性验证
配置1 媒体地址不存在,真实请求返回 404 video.error 与媒体 404 对应,未进入正常播放 修复资源地址,核对 loadedmetadata 和实际时间推进
配置2 业务 play 监听器立即调用 pause() play / playing 后立刻 pause,资源已正常生成 移除错误 pause 逻辑,在相同手势条件下复测
干扰项 只根据表面现象修改无关条件 没有保留条件与输入的一次截图 同时改变设备、数据与逻辑,只保留成功结果

三级提示

  1. 先复现 商品演示无法加载,或已播放却被脚本立刻暂停。
  2. 对照实际证据:video.error 与媒体 404 对应,未进入正常播放;或 play / playing 后立刻 pause,资源已正常生成
  3. 一次只改变对应原因:修复资源地址,核对 loadedmetadata 和实际时间推进;或 移除错误 pause 逻辑,在相同手势条件下复测

验收、边界与恢复

实际 video 与 MediaRecorder;录制素材是测试内容,事件观察不冒充 Media 面板已操作。 保持输入、数量、环境一致;完成故障与正常对照,选择一致证据;三轮引导和两配置挑战分别取证,原生步骤与本地结果分列。停止后清理本会话资源,再恢复浏览器设置。

共同合同 · 本批验收 · 官方参考。