Web前端技术实验

实验06　HTML5视频嵌入与基础控制

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

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

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

一、学习目标

掌握video、source、track、poster、controls和preload。
理解媒体格式、回退文本、字幕与自动播放限制。
建立使用本地媒体资源和相对路径的项目目录。

二、核心任务

建立media目录，嵌入一段本地短视频并提供至少一个source。
设置controls、poster和preload，编写浏览器不支持时的回退说明。
添加WebVTT字幕文件或规范的字幕占位说明，并检查track标签。
用CSS控制视频最大宽度、比例和页面中的说明区域。

三、验收标准

序号	可观察条件	记录
1	在本地打开学生作品时，视频可播放或明确显示可诊断的回退信息。	□通过　□需修改
2	视频不溢出容器，比例正确。	□通过　□需修改
3	字幕轨道文件路径正确，代码中无autoplay强制播放。	□通过　□需修改

四、提交物

视频页面源码
media与captions目录
播放截图
实验报告阶段记录

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

五、90分钟流程

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

六、评分量规（100分）

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

七、拓展与思考

选做：增加音频版本或第二种视频格式，并说明浏览器选择过程。

思考：为什么有声视频通常不能自动播放？

八、AI辅助记录

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