使用HTML5 video标签可原生嵌入视频，支持controls、autoplay、muted、loop等属性，推荐提供MP4和WebM双格式以确保兼容性，并通过CSS设置响应式布局适配不同设备。
在网页中添加视频是现代网站开发的常见需求，HTML5 提供了原生支持的 video 标签，让开发者无需依赖第三方插件（如 Flash）即可嵌入视频内容。本文详细介绍 HTML5 中插入视频的方法以及常用属性设置。
使用 video 标签插入视频
HTML5 的 video 标签用于在网页中嵌入视频文件。基本语法如下：
上面代码中：
- src 属性指定视频文件路径。
- controls 表示显示播放、暂停、音量等控制条。
- 标签内的文字是降级提示，仅在浏览器不支持 video 时显示。
你也可以使用 source 标签指定多个视频源，以提高兼容性：
立即学习“前端免费学习笔记（深入）”；
浏览器会按顺序尝试加载第一个能识别的格式，推荐同时提供 MP4 和 WebM 格式以覆盖更多设备。
常用 video 属性详解
通过设置不同属性，可以控制视频的行为和外观。以下是常用的属性说明：
- controls：显示默认控制栏（播放/暂停、进度条、音量等）。
- autoplay：视频加载后自动播放（部分浏览器限制静音 autoplay）。
- muted：静音播放，常与 autoplay 配合使用避免被拦截。
- loop：循环播放视频。
-
preload：指定视频预加载方式，可选值有：
- auto：尽可能预加载视频数据。
- metadata：只加载元信息（时长、尺寸等）。
- none：不预加载视频。
- width 和 height：设置播放器尺寸，单位为像素或百分比。
-
poster：指定视频加载前显示的封面图片，例如：
支持的视频格式与编码
不同浏览器对视频格式的支持存在差异，主要格式包括：
- MP4 (H.264 + AAC)：兼容性最好，适用于 Safari、Chrome、Edge、iOS 等。
- WebM (VP8/VP9 + Vorbis/Opus)：开源格式，Chrome、Firefox、Edge 支持良好。
- OGG (Theora + Vorbis)：较老格式，Firefox 和 Chrome 支持。
建议至少提供 MP4 和 WebM 两种格式，确保跨浏览器兼容。
响应式视频设置
为了让视频在不同设备上自适应屏幕，可通过 CSS 实现响应式布局：
CSS 样式示例：
.responsive-video {width: 100%;
height: auto;
}
这样视频会随容器宽度缩放，保持宽高比不变。
基本上就这些。掌握 video 标签的基本用法和属性设置，就能在网页中高效嵌入视频内容，提升用户体验。注意格式兼容性和移动端适配，确保视频在各类设备上正常播放。
