直接用controls和poster属性即可启用播放控件和封面图，无需js；controls添加后显示默认控件，poster需静态写在video标签中且推荐绝对路径；封面不显示时重点检查网络请求、mime类型及ios兼容性。
直接用 controls 属性启用播放控件，用 poster 属性指定封面图——两者都写在 <video></video> 标签里，无需 JS 就能生效。
播放控件：加 controls 属性就行
在 <video></video> 标签中加上 controls（不带等号和值），浏览器就会显示默认的播放条、音量、全屏等按钮：
<video controls src="demo.mp4"></video>- 如果想隐藏默认控件、自定义 UI，就别加这个属性，改用 JS + CSS 自建按钮
- 移动端 Safari 需额外加
playsinline（iOS）或webkit-playsinline，否则可能强制全屏，导致控件错位或触摸失效
封面图：poster 必须静态写在 HTML 中
poster 是原生属性，不是 CSS 背景，也不是 JS 变量。它只在视频未加载、未播放时显示，且必须在标签里直接声明才可靠：
- 正确写法：
<video controls poster="/images/cover.jpg" src="demo.mp4"></video> - 路径推荐用绝对路径（以
/开头），避免因页面 URL 层级导致 404 - 不要用
video.poster = 'xxx.jpg'动态赋值——Chrome、Safari 均不响应，纯属无效操作 - 图片格式优先选
.jpg或.webp，避免透明 PNG 在旧安卓 WebView 中渲染异常
封面图常不显示？重点查这三处
大多数“封面没出来”问题，不是代码写错，而是资源链路或加载策略出问题：
- 打开开发者工具 → Network → 过滤 Img，看
poster请求是否返回 200；若为 404 或 302 跳转到 HTML 页面，说明路径或服务器配置有误 - 检查图片 MIME 类型是否正确（如
image/jpeg），Nginx/Apache 若未配置好后缀映射，可能返回text/html导致静默失败 - iOS Safari 对 poster 有隐性要求：宽度低于 640px 可能跳过渲染；若同时设了
preload="none"，它甚至不发起请求——建议至少设preload="metadata"
增强体验的小技巧
原生 poster 行为有限，但可低成本补足：
- 用 CSS 给
<video></video>加背景图兜底：video { background: url(/images/cover.jpg) center/cover no-repeat; }，即使 poster 失效也有视觉占位 - 需要点击播放图标才触发播放？用
<div> 层覆盖视频区域，里面放 <code><img>和自定义播放按钮，点击后调用video.play()并隐藏该层 - 若视频首帧是黑场或 logo 动画，会直接覆盖 poster——这时不能靠修改 poster，而应在编码阶段嵌入合适的关键帧，或用 JS 截取第一帧生成新封面
