视频播放结束后黑屏或只留首帧是浏览器未重置视频状态所致，常见于移动端Safari等；解决方法包括正确配置poster属性、监听ended事件重置currentTime、用canvas捕获首帧兜底，以及规避自动播放策略影响。
视频播放结束后黑屏或只留首帧，本质是浏览器未按预期重置视频状态，常见于移动端 Safari、夸克、Chrome 等基于 WebKit 或 Chromium 内核的浏览器。这不是 bug，而是设计行为——多数浏览器默认不自动重载视频资源，也不强制回退到 poster 帧或第一帧，尤其在禁用自动播放、缺少用户交互或解码器未释放时更明显。
确保 poster 属性生效并兼容各平台
poster 是最直接控制“播放后显示什么”的方式，但容易被忽略细节：
- 必须使用绝对路径或同源 URL，相对路径在 iOS Safari 中常失效；
- 图片格式优先选 JPG 或 PNG，避免 WebP（部分旧版 iOS 不支持）；
- 需在 标签中显式声明，且不能被 CSS 隐藏或覆盖（如
display: none或opacity: 0）； - 若视频本身带 alpha 通道或透明背景，poster 可能被遮挡，建议用 solid 背景色图。
监听 ended 事件并手动重置 currentTime
播放结束时主动跳转到 0 秒，可触发重新渲染首帧（注意：需配合 muted 或用户交互才可靠）：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 添加
video.addEventListener('ended', () => { video.currentTime = 0; })； - 为防 iOS Safari 因静音策略拒绝 seek，建议先设
video.muted = true（即使原视频无声）； - 部分机型需加微小延时再 seek，例如：
setTimeout(() => { video.currentTime = 0; }, 50)； - 避免在 ended 后立即调用
play()，否则可能触发自动播放拦截。
兼容性增强：fallback 到 poster + canvas 首帧捕获
当 poster 不生效或首帧提取失败时，可用 Canvas 动态绘制首帧作为兜底：
- 监听
canplay后调用drawImage(video, 0, 0, width, height)； - 对 iOS 设备，优先尝试
currentTime = 0.1（而非 0），避开 GOP 关键帧缺失问题； - 捕获成功后隐藏 video 元素，用 canvas 或 img 显示该帧，播放时再切回 video；
- 注意跨域视频需设置
crossOrigin="anonymous"，否则 canvas 会被污染。
规避自动播放策略导致的状态残留
移动端严格限制无用户交互下的媒体操作，播放结束后若未清理状态，易卡在黑屏：
- 播放前确保有用户手势上下文（如 click/tap 触发），否则
ended后的 reset 可能被忽略； - 不要依赖
autoplay+loop模拟“循环播放”，它会掩盖真实结束状态； - 播放结束后调用
video.load()可重置加载状态，但会清空已缓存数据，慎用于短频次播放场景。
