本文详解使用 HTML 标签嵌入 MP4、MOV 等常见格式视频的方法，涵盖基础语法、多格式兼容方案、关键属性设置及浏览器兼容性注意事项。
本文详解使用 html `
在网页中直接播放视频，不能依赖 标签（它仅触发下载或新页跳转），而应使用语义化、原生支持的
基础用法：单源 MP4 视频
最简可行示例如下（适用于现代浏览器，如 Chrome、Firefox、Edge、Safari）：
<video width="640" height="360" controls><source src="example.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </source></video>
- width 和 height 控制显示尺寸（单位为像素）；
- controls 属性启用播放/暂停、音量、进度条等默认控件；
标签指定视频资源路径与 MIME 类型； - 标签内文本（如“您的浏览器不支持…”）仅在不支持
多格式兼容：覆盖 MP4、WebM、OGG（推荐实践）
虽然你的视频是 .mp4 和 .mov 格式，但需注意：
✅ MP4（H.264 + AAC）：被所有主流浏览器广泛支持；
⚠️ MOV（Apple QuickTime）：Safari 支持较好，Chrome/Firefox 可能受限，建议转码为 MP4；
❌ 原生不支持 MOV 的浏览器会静默失败，因此不建议直接使用 .mov 作为
为最大化兼容性，推荐将视频统一转为 MP4，并辅以 WebM（VP9 编码）作为备选：
<video width="640" height="360" controls preload="metadata"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><!-- OGG 可选，已较少使用 --><!-- <source src="video.ogv" type="video/ogg"> --> 您的浏览器不支持视频播放，请升级或更换浏览器。 </source></source></video>
✅ preload="metadata" 表示预加载视频元数据（时长、尺寸、首帧），而非整个文件，提升首屏加载体验。
关键属性说明（增强用户体验）
| 属性 | 说明 | 示例 |
|---|---|---|
| autoplay | 页面加载后自动播放（多数浏览器要求 muted 同时存在） | autoplay muted |
| loop | 循环播放 | loop |
| muted | 静音（常与 autoplay 搭配） | muted |
| poster | 视频加载前显示的封面图 | poster="cover.jpg" |
示例（自动静音循环播放）：
<video width="640" height="360" autoplay muted loop poster="intro-poster.jpg"><source src="hero-loop.mp4" type="video/mp4"></source></video>
注意事项与最佳实践
-
? MOV 文件处理建议：
Safari 对 .mov 支持较优，但为保障全平台稳定播放，强烈建议使用 FFmpeg 或在线工具将其转为 H.264 编码的 MP4：ffmpeg -i input.mov -c:v libx264 -c:a aac -movflags +faststart output.mp4
-movflags +faststart 可使视频支持边下边播（HTTP 流式加载）。
? 服务器 MIME 类型配置：
确保 Web 服务器正确返回视频 MIME 类型（如 video/mp4），否则部分浏览器可能拒绝加载。Apache/Nginx 需配置 AddType video/mp4 .mp4 等指令。-
? 移动端适配：
iOS Safari 要求 playsinline 属性才能在页面内播放（而非全屏）：<video playsinline controls ...></video>
-
? 无障碍支持：
添加<video ...><source src="video.mp4"><track kind="subtitles" srclang="zh" label="中文" src="sub-zh.vtt" default></track></source></video>
掌握
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
