学习前提
掌握相对路径和图片，能判断资源是否加载成功。
本课完成后你能做什么
配置可控制的视频，理解字幕文件和资源格式，并在功能缺失时保留基本信息。
先理解机制
视频文件扩展名描述容器，不足以保证其中的编码在所有浏览器可用。source 可以提供多个资源候选，浏览器选择它支持的格式。controls 提供原生播放操作；预加载只是给浏览器的提示，不是强制下载命令。不要让用户必须听到声音才能获得教程中的关键步骤。
字幕 track 通常引用 WebVTT 文本，包含时间范围和对应文字；仅显示讲话文本还不一定覆盖重要环境声音。嵌入 iframe 是把另一个文档放进当前页面，既影响性能，也引入独立内容和权限边界。只有确实需要嵌入时才增加它，提供 title 说明内容，按需求设置最小权限。
可运行示例
<video controls preload="metadata" width="640" height="360">
<source src="media/intro.mp4" type="video/mp4">
<track src="media/intro-en.vtt" kind="captions" srclang="en" label="English" default>
<p>Your browser cannot play this video. <a href="transcript.html">Read the transcript</a>.</p>
</video>
<p><a href="transcript.html">Read the full transcript</a></p>推演与验证
这个片段需要你提供自己的视频、字幕和文字稿，示例地址不是本站下载文件。先在 HTTP 环境里运行，再检查 Network 中媒体和字幕状态。关闭声音后测试能否获得相同信息；模拟资源缺失时，保留在 video 外面的文字稿链接仍然可见。
常见错误与边界
不要承诺自动播放一定生效；浏览器可能因声音和用户设置限制它。不要把敏感认证信息放进 iframe URL。对陌生来源盲目开放全部权限会扩大页面能力，而不是修复兼容问题。媒体课重点是可访问、可控制和可降级，不是尽量自动运行。
动手练习
为十秒演示视频写两个字幕片段，并说明为什么还要在播放器外提供文字稿。
参考解法与理由
WebVTT 用开始和结束时间界定每条字幕。外部文字稿支持阅读、检索以及媒体加载失败的情况；它与字幕承担不同职责。时间范围应与实际演示对齐，不要把整段字幕都放在第一秒。
WEBVTT
00:00.000 --> 00:04.000
Open the HTML file.
00:04.000 --> 00:10.000
Save the change and refresh the browser.