最可靠方案是使用原生<video>标签，需指定src或<source>、加controls属性、用preload="metadata"，路径错误和格式不支持是常见失败原因。
用 <video> 标签嵌入本地或远程视频最可靠
浏览器原生支持的 <video> 是当前唯一无需额外库、兼容性好、语义清晰的方案。Flash 已淘汰，<iframe> 嵌第三方平台（如 YouTube）虽简单，但不适用于自有视频文件。
- 必须提供至少一个
src或用<source>指定格式，否则播放器显示为空白或报错Media resource failed to load - 常见格式优先级建议：
.mp4（H.264+AAC，全平台支持）→.webm（VP9，开源/压缩率高）→.ogg（较少用） - 不要省略
controls属性——没它用户点不了播放/音量/进度条；加preload="metadata"可减少首帧等待时间 - 示例：
<video width="640" height="360" controls preload="metadata"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> Your browser does not support the video tag. </video>
路径写错是 <video> 不播放的第一大原因
本地开发时，src 路径错误不会报 JS 错误，但控制台会提示 Failed to load resource: net::ERR_FILE_NOT_FOUND 或状态码 404。本质是 HTTP 请求失败，和图片 <img src> 失败逻辑一致。
- 相对路径以 HTML 文件所在目录为基准，不是以 CSS/JS 文件位置为准
- 用开发者工具 Network 面板过滤
media类型，看请求是否发出、状态码是否为200 - 避免在本地双击打开 HTML（
file://协议），部分浏览器会因安全策略禁止加载本地视频；应起一个本地服务（如python3 -m http.server） - 服务器部署后注意 MIME 类型：确保
.mp4返回video/mp4，Nginx/Apache 需显式配置，否则 Safari 可能拒绝播放
移动端自动播放限制必须手动绕过
iOS Safari 和 Android Chrome 默认禁止视频自动播放（含 autoplay + muted），这是硬性策略，不是 bug。用户未与页面交互前，play() 会直接抛出 NotAllowedError。
- 可行解法只有两种：加
muted并配合用户手势触发（如点击按钮），或完全依赖用户点击播放控件 -
autoplay单独使用在现代浏览器中基本无效；autoplay muted在部分安卓机上可工作，但 iOS 仍要求首次交互 - 不要在
DOMContentLoaded或load事件里调video.play()——大概率失败。正确时机是绑定到click/touchstart回调中 - 示例：
<button id="playBtn">播放视频</button> <video id="myVideo" src="clip.mp4" muted></video> <script> document.getElementById('playBtn').addEventListener('click', () => { myVideo.play().catch(e => console.log('自动播放被阻止:', e)); }); </script>
用 <iframe> 嵌 YouTube/Bilibili 要防布局塌陷和性能拖累
第三方视频 iframe 看似省事，但默认宽高为 0，且会预加载大量脚本，影响首屏性能和 SEO。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
width和height，否则 iframe 高度为 0，内容不可见；推荐用响应式容器包裹，避免固定像素值 - YouTube 的
iframe地址末尾加?rel=0&modestbranding=1可隐藏相关视频和 logo，减少干扰 - Bilibili 嵌入代码需确认是否启用「隐私模式」（即
enablejsapi=1且不自动执行脚本），否则可能触发 GDPR 弹窗或额外请求 - 如果页面有多个 iframe，考虑懒加载：用
loading="lazy"（Chrome 77+ 支持），或监听滚动后动态插入src
src、type、muted 和用户第一次点击之间。 
