本文详解 HTML 标签的用法，涵盖基础语法、多格式兼容方案、常用属性设置及浏览器兼容性注意事项，帮助开发者正确嵌入 MP4、MOV 等常见视频文件并实现可控播放。
本文详解 html `
在 HTML 中直接播放视频，不应使用 标签（它仅触发下载或新页跳转），而应使用语义化、原生支持的
基础用法：单文件快速嵌入
最简形式如下，适用于已知目标浏览器支持 .mp4（H.264 编码）的场景：
<video width="640" height="360" controls> <source src="my-video.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
- controls 属性启用播放/暂停、音量、进度条等默认控件（建议始终添加，提升可访问性）；
标签声明视频源，type 属性明确 MIME 类型，帮助浏览器快速判断是否支持； - 标签内备用文本（如“您的浏览器不支持…”）仅在不支持
多格式兼容：覆盖主流浏览器
不同浏览器对编码格式的支持存在差异（例如 Safari 对 .mov（通常为 H.264 或 HEVC）支持较好，Firefox 更倾向 WebM）。为确保最大兼容性，推荐同时提供 MP4（H.264）和 WebM（VP9）双源：
<video width="640" height="360" controls poster="preview.jpg"> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> <!-- 可选：添加 OGG 源以覆盖极小众场景 --> <source src="video.ogv" type="video/ogg"> 您的浏览器无法播放此视频，请升级或更换浏览器。 </video>
✅ 关键提示：浏览器按
出现顺序依次尝试加载，一旦匹配成功即停止后续解析。因此，将兼容性最广的格式（如 MP4）放在最后，把更现代高效但支持度稍低的格式（如 WebM）前置，可兼顾性能与覆盖。 立即学习“前端免费学习笔记（深入）”；
关于 MOV 文件的重要说明
.mov 是 Apple 容器格式，HTML5 视频标准本身不直接定义 .mov 的 MIME 类型支持。能否播放取决于其内部编码：
- 若 .mov 封装的是 H.264 + AAC（最常见），多数现代浏览器（Chrome、Safari、Edge）可直接播放，可写作：
<source src="clip.mov" type="video/mp4"> <!-- 注意：此处 type 仍用 video/mp4 -->
- 但若含 HEVC（H.264 的继任者）或 ProRes 等专业编码，则仅 Safari（macOS/iOS）原生支持，其他浏览器大概率失败。
✅ 强烈建议：将 .mov 文件用 FFmpeg 等工具转码为标准 H.264/AAC 的 .mp4，以确保全平台稳定播放：ffmpeg -i input.mov -c:v libx264 -crf 23 -c:a aac -b:a 128k output.mp4
进阶控制与最佳实践
- poster 属性指定视频首帧封面图（未播放时显示），提升用户体验；
- autoplay、muted、loop 等布尔属性可增强交互，但注意：现代浏览器普遍要求 autoplay 必须配合 muted 才生效（防骚扰）；
- 通过 JavaScript 可精细控制播放逻辑：
const video = document.querySelector('video'); video.addEventListener('loadeddata', () => console.log('视频元数据已加载')); video.play().catch(e => console.warn('自动播放被阻止:', e));
总结：用
