使用HTML5的video标签可原生嵌入视频，通过controls、source、autoplay等属性实现播放控制与多格式兼容，推荐提供MP4、WebM等多源文件并设置宽高、封面图，注意压缩体积、避免有声自动播放，提升网页加载速度与用户体验。
在网页中嵌入视频是提升内容表现力的重要方式。HTML5 提供了原生支持的 video 标签，让开发者可以轻松地将视频文件添加到网页中，无需依赖第三方插件（如 Flash）。下面详细介绍如何正确使用 HTML 嵌入视频。
1. 使用
HTML5 的 标签用于在网页中播放视频。最简单的用法如下：
说明：
- controls 属性用于显示播放、暂停、音量等控制条。
-
- 标签内的文字“您的浏览器不支持 video 标签”是降级提示，仅在不支持 video 的浏览器中显示。
2. 支持多种视频格式以确保兼容性
不同浏览器对视频格式的支持不同，常见格式包括 MP4、WebM 和 Ogg。为保证兼容性，建议提供多个源文件：
浏览器会按顺序加载第一个它能识别的格式，推荐将 MP4 放在第一位，因为其兼容性最好。
立即学习“前端免费学习笔记（深入）”；
3. 设置视频尺寸与自动播放
可通过属性控制视频的显示大小和行为：
-
width 和 height：设置视频宽高，例如
width="640" height="360" - autoplay：视频加载后自动播放（部分浏览器限制静音下才可自动播放）
- muted：静音播放，常与 autoplay 配合使用
- loop：循环播放
- poster：指定视频加载前显示的封面图
示例代码：
4. 注意事项与最佳实践
为了让视频嵌入更高效且用户体验更好，请注意以下几点：
- 尽量压缩视频文件大小，避免影响网页加载速度
- 优先使用 MP4（H.264 编码），兼容性最广
- 不要滥用 autoplay，尤其是有声音的视频，可能被浏览器阻止
- 在移动设备上测试播放效果，某些设备可能不支持自动播放或全屏
- 考虑使用 CDN 托管视频文件，提升加载速度
基本上就这些。掌握 标签的用法后，你可以灵活地在网页中嵌入高质量视频内容，提升用户交互体验。不复杂但容易忽略细节，建议结合实际项目多尝试调整参数。
