HTML怎么嵌入视频_HTML video标签使用教程【案例】

video自动播放需同时设autoplay和muted；ios需加playsinline；换src后须调load()和play()；自适应推荐aspect-ratio或display:block+width:100%。

video 标签不自动播放？检查 autoplay 和 muted 是否同时存在

现代浏览器（chrome、edge、safari）默认禁止有声音的自动播放，哪怕写了 autoplay 也大概率失效。真正起效的前提是：必须同时加 muted 属性。

• <video autoplay muted src="demo.mp4"></video> —— 可静音自动播
• <video autoplay src="demo.mp4"></video> —— 大概率被拦截，控制台可能报 DOMException: play() failed because user interaction is required
• 如果必须带声播放，得等用户真实交互（比如点击按钮）后再调用 play() 方法
• Safari 对 autoplay 更严格，即使 muted 有时也要配合 playsinline（尤其 iOS）

视频在手机上全屏播放？加 playsinline 控制内联行为

iOS Safari 默认强制全屏播放 <video></video>，导致布局错乱或交互中断。这不是 bug，是苹果的策略限制。

• 必须显式添加 playsinline 属性：<video playsinline src="clip.mp4"></video>
• 仅加 playsinline 不够，iOS 10+ 还要求 webkit-playsinline（旧版兼容写法，现在多数可省略）
• 微信内置浏览器（X5 内核）对 playsinline 支持不稳定，有时需配合 x5-video-player-type="h5-page" 等私有属性
• 安卓 Chrome 一般默认内联，但部分定制 webview 可能禁用，建议统一加上

src 换了但视频没更新？注意浏览器缓存和 load() 调用时机

直接改 video.src 后不调用 load()，浏览器可能复用旧解码器状态，导致画面卡住、音频错位甚至黑屏。

• 修改 src 后务必手动触发：video.load(); video.play();
• 不要在 video.readyState === 0（尚未加载）时就调 play()，容易报错 Failed to load because no supported source was found
• 如果用的是 base64 或 blob URL，注意生命周期：blob URL 在页面刷新后失效，revokeObjectURL 过早调用也会导致空白
• 动态换源时，建议先 video.pause()，再 video.src = newSrc，再 load()，避免状态冲突

怎么让视频自适应容器宽高？别只靠 CSS width/height

单纯设 width: 100% 容易拉伸变形，或高度塌陷（因为 <video></video> 默认是 inline 元素，有基线间隙）。

立即学习“前端免费学习笔记（深入）”；

• 加 display: block 消除底部空白：video { display: block; width: 100%; height: auto; }
• 保持宽高比推荐用 aspect-ratio（Chrome 88+/firefox 89+ 支持）：video { aspect-ratio: 16 / 9; width: 100%; }
• 老浏览器可用 padding-top 百分比 hack，但需包裹一层 div，且 video 设为绝对定位
• 慎用 object-fit: cover —— 它会裁剪画面，不是所有场景都适用；contain 才是等比缩放不裁剪

video 标签看着简单，但每个属性背后都有平台差异和策略限制。最常出问题的不是语法写错，而是忽略了「用户交互时机」「移动端策略」「缓存与状态同步」这三个隐性前提。