正确使用HTML5视频控件需添加controls属性并设置宽高，通过source标签指定视频路径和格式，推荐MP4以确保兼容性；为适配不同浏览器可提供多个格式源文件；可选autoplay、muted、loop和preload属性实现自动播放、静音、循环及预加载功能；若控件不显示，应检查controls是否遗漏、路径是否正确、服务器MIME类型配置及浏览器自动播放策略限制。
在网页中添加视频控件非常简单，HTML5 提供了 标签，可以直接嵌入视频并显示播放控件。下面教你如何正确使用 HTML 视频控件并确保它正常显示。
1. 基本语法：添加视频和默认控件
使用 标签，并加上 controls 属性，浏览器会自动显示播放、暂停、音量、进度条等标准控件。
说明：
- width 和 height 设置视频尺寸。
- controls 是关键属性，没有它就不会显示播放按钮、进度条等。
-
- 中间的文字是当浏览器不支持 video 时的提示信息。
2. 支持多种格式以兼容不同浏览器
不同浏览器对视频格式的支持略有差异，可以提供多个 source 来增强兼容性。
浏览器会按顺序加载第一个它能支持的格式。
立即学习“前端免费学习笔记（深入）”；
3. 自动播放、静音与循环播放（可选设置）
可以根据需要添加以下属性：
- autoplay：视频自动播放（部分浏览器要求静音才能自动播放）
- muted：静音播放，常配合 autoplay 使用
- loop：循环播放
- preload：控制视频预加载行为，如 "none"、"auto" 或 "metadata"
4. 常见问题与解决方法
如果视频控件不显示，请检查以下几点：
- 是否遗漏了 controls 属性？这是控件显示的关键。
- 视频路径是否正确？确保文件存在且拼写无误。
- 服务器是否支持视频 MIME 类型？特别是 .mp4 文件需正确配置。
- 浏览器是否屏蔽自动播放？尝试手动点击播放测试。
基本上就这些。只要写对标签和属性，HTML 视频控件就能正常显示和操作，无需额外 JavaScript 或插件。不复杂但容易忽略细节。
