HTML 视频
媒体总览把你引向了几个家族。本课只聚焦其中一个：用于你自己托管的短片与演示的 video 元素。用 controls 给访客提供播放与暂停界面，而不是用突然开始的声音去惊吓他们。
video 做什么
video 告诉浏览器去获取一部影片文件，并把它画到页面上。你可以用 src 指向单个文件，也可以列出若干 <source> 子元素，让浏览器挑选它支持的格式。可选属性用于预留尺寸（width / height）、在播放前显示静帧（poster），以及露出原生控件。
直接回答
使用 <video controls src="movie.mp4">，或嵌套多个 <source> 子元素以提供多种格式。添加 poster 图片作为播放前的预览帧。在 video 内部放入简短的回退文本（以及可选的下载链接），供无法播放媒体的用户代理使用。优先使用压缩且体积合理的文件。
带 controls 的简单视频
单个 MP4，加上 controls 和一个宽度，对许多教学页面已经足够。
带 controls 的简单视频
html<video controls width="480" src="media/demo.mp4">
Sorry, your browser does not support this video.
</video>阅读简单示例
controls请求浏览器提供播放/暂停界面width="480"有助于在文件加载时预留布局空间src指向你media文件夹中的影片文件video内部的文本是在元素不受支持时的回退内容
多个来源与 poster
不同浏览器对格式的支持舒适度不同。用带 type 提示的 WebM 与 MP4 列表，再配上一张静帧 poster，是常见的实用模式。
多个来源与 poster
html<video controls width="480" poster="media/demo-poster.jpg">
<source src="media/demo.webm" type="video/webm">
<source src="media/demo.mp4" type="video/mp4">
Download the <a href="media/demo.mp4">MP4</a> instead.
</video>阅读多来源示例
poster在播放开始前显示预览图- 每个
source指定一个文件和 MIMEtype - 浏览器选择它能播放的第一个来源
- 内部的下载链接在无法播放时提供帮助
文件大小与格式
巨大的相机导出文件会在慢速网络上卡住。请导出符合教学需要的网页尺寸 MP4（可选再加 WebM）——在课程页上，短演示远胜于数 GB 的母带。第一天不必准备每一种容器；先让一个清晰的 MP4 正常工作，若受众需要，再添加第二种格式。
自动播放：先学会 controls
带声音的自动播放常常被拦截，而且通常不礼貌。营销英雄区确实存在静音自动播放的技巧，但初学者应先掌握 controls 和由用户启动的播放。以后真正需要自动播放时，请仔细阅读浏览器策略，并保留可访问的暂停路径。
字幕与无障碍（习惯）
如果口述内容在讲授重要知识，请规划字幕或文字稿——即便完整的 track 元素要到后续步骤才接线。不要只把 poster 图片当作「说话头」课节的唯一无障碍摘要。
宽度、高度与布局
设置 width（在已知宽高比时再配上匹配的 height）可以减少视频元数据加载时的布局跳动。用不匹配的数字硬拉会显得难看；请像对待图片一样，把真实宽高比放在心里。
在编辑器中练习
- 把一段短
.mp4放进media文件夹。 - 用
video+controls+ 合理的宽度嵌入它。 - 在元素内部添加回退文本。
- 可选：添加
poster图片和第二种source格式。 - 打开页面，播放并暂停；若条件允许，再在限速网络下测试——你会体会到文件大小为何重要。
常见错误
- 缺少
controls，用户难以播放 - 发布巨大未压缩文件，在慢速网络上卡住
- 忘记回退文本或下载链接
- 尚未理解基础就急着使用带声音的自动播放
- 像给
img那样给video加alt（应改用字幕/文字稿和可见描述） - 把托管的 YouTube 嵌入（
iframe）与自托管的video文件混为一谈
小结
video嵌入你自己托管的影片文件- 用
controls提供播放界面 - 多个
source标签可改善格式支持 poster在播放前显示预览帧- 优先使用压缩文件，并避免突然的带声自动播放
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部