HTML视频标签常用属性包括src、controls、autoplay等，用于控制视频路径、播放行为和外观；合理组合这些属性可提升用户体验并适配不同设备。
HTML视频标签（<video>）用于在网页中嵌入视频内容。它支持多种属性来控制视频的播放行为和外观。以下是常用的HTML视频标签属性详解，帮助你更好地使用该标签。
1. src 属性
指定视频文件的路径。
- 值为视频文件的URL地址。
- 可以是相对路径或绝对路径。
- 示例：
<video src="movie.mp4"></video>
2. controls 属性
显示浏览器自带的播放控件，如播放/暂停、音量、进度条等。
- 布尔属性，出现即生效。
- 推荐始终添加此属性，以提升用户体验。
- 示例：
<video src="movie.mp4" controls></video>
3. autoplay 属性
页面加载后自动播放视频。
立即学习“前端免费学习笔记（深入）”；
- 由于多数浏览器出于用户体验考虑会禁用有声视频的自动播放，建议配合静音使用。
- 通常与 muted 一起使用才能生效。
- 示例：
<video src="movie.mp4" autoplay muted></video>
4. muted 属性
初始时静音播放视频。
- 布尔属性，设置后音频关闭。
- 常用于背景视频或实现自动播放。
- 用户可手动取消静音。
- 示例：
<video src="bg-video.mp4" autoplay muted loop></video>
5. loop 属性
视频播放结束后自动重新开始。
- 适用于背景视频或循环展示场景。
- 常与 autoplay 和 muted 搭配使用。
- 示例：
<video src="loop.mp4" loop muted autoplay></video>
6. preload 属性
指定页面加载时是否预先加载视频数据。
- 可选值：
- none：不预加载，用户点击才开始加载。
- metadata：只预加载视频元信息（时长、尺寸等）。
- auto：尽可能预加载全部视频内容。
- 若未设置，浏览器自行决定。
- 注意：移动端通常忽略此属性以节省流量。
- 示例：
<video src="demo.mp4" preload="metadata" controls></video>
7. width 和 height 属性
设置视频播放区域的宽度和高度（单位为像素）。
- 保持宽高比可避免画面变形。
- 也可使用CSS设置样式。
- 示例：
<video src="movie.mp4" width="640" height="360" controls></video>
8. poster 属性
在视频加载前显示一张占位图。
- 提升用户体验，告知用户视频内容。
- 图片URL地址。
- 示例：
<video src="movie.mp4" poster="cover.jpg" controls></video>
9. playsinline 属性（常用于移动端）
防止iOS Safari自动全屏播放视频。
- 特别适用于内联播放的短视频或背景视频。
- 仅在iOS设备上有效。
- 示例：
<video src="inline.mp4" playsinline autoplay muted loop></video>
10. disablePictureInPicture 属性
禁用画中画模式。
- 阻止用户启用画中画播放功能。
- 某些场景下用于控制播放体验。
- 示例：
<video src="movie.mp4" disablePictureInPicture></video>
基本上就这些常用属性。合理组合使用可以让视频更符合网页设计需求，同时兼顾性能与用户体验。注意兼容性和移动端行为差异，测试不同设备下的表现很重要。
