Web前端技术实验

实验07　视频事件、状态与可用性完善

课程代码 ZY070018｜适用：2024级、2025级｜第7次
2026—2027学年第一学期

字段	内容	字段	内容
大纲锚点	实验项目六：通过video标签添加视频	学时拆分	第2次（完成4学时项目）
项目属性	基础验证型 / 必做 / 1人一组	课程目标	LO1、LO2、LO3

本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

能监听play、pause、timeupdate、ended等媒体事件。
能把媒体状态以文字反馈给用户，并保持原生控件可用。
理解不使用marquee等过时标签实现信息展示。

二、核心任务

在上次作品中增加播放状态、当前时间和总时长显示。
使用addEventListener绑定媒体事件，禁止内联onplay等写法。
增加“回到开头”和“静音切换”辅助按钮，并同步按钮文字或状态。
用CSS动画或滚动容器实现克制的信息提示，并支持prefers-reduced-motion。

三、验收标准

序号	可观察条件	记录
1	状态文字与实际播放状态同步。	□通过　□需修改
2	键盘可操作原生和自定义按钮，焦点样式可见。	□通过　□需修改
3	无marquee、Flash或依赖window.status的代码。	□通过　□需修改

四、提交物

完整4学时项目
事件清单与说明
键盘测试记录
完整实验报告

统一命名：学号_姓名_实验07

五、90分钟流程

时间	活动
0—10	说明与安全检查
10—25	预测、演示、最小验证
25—65	独立完成核心任务
65—80	测试与同伴复核
80—90	抽查与退出记录

六、评分量规（100分）

维度	分值	判定要点
功能与任务完成	45	必做功能可运行，数据和交互正确
测试与问题修复	20	有边界或错误测试，并保留复测记录
代码与页面质量	15	结构、命名规范，控制台无未解释错误
报告与证据	15	报告、截图与源码相互对应
现场解释	5	能解释关键实现和至少一项修改

七、拓展与思考

选做：记录用户上次播放位置到localStorage，并提供“重新开始”。

思考：为什么应优先保留原生controls，而不是完全自制播放器？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。