应使用带播放图标的绝对定位层而非伪元素或svg，因后者在高缩放/retina屏下易模糊、热区不准且ios safari pointer-events支持不稳定；封面用img或background-image，按钮用独立button/div并设aria-label和tabindex，video初始隐藏，监听loadedmetadata后切换显隐，点击时直接调用play()并处理失败回退，注意宽高比一致与定位精准。
直接加一个带播放图标的绝对定位层，比用伪元素或 SVG 更可控、更兼容。
为什么不能只靠 ::before 或 ::after 画播放按钮
纯 CSS 伪元素画的三角形 + 圆形在高缩放或 Retina 屏下容易模糊，且无法精确控制点击热区；iOS Safari 对伪元素叠加在 video 上的 pointer-events 支持不稳定，点不中是常态。
实操建议：
- 封面图用
<img>或background-image渲染，确保清晰度可控 - 播放按钮单独写成一个
<button></button>或<div> 元素，设 <code>position: absolute叠在封面之上 - 给按钮加
aria-label="播放视频"和tabindex="0"，保证可访问性 - 按钮内用 SVG 而非 Unicode 字符（如 ▶），避免字体加载失败或渲染错位
- 初始状态：
video设opacity: 0; pointer-events: none，封面容器设display: block - 监听
loadedmetadata事件，触发后渐隐封面、渐显video，并移除按钮 - 别依赖
poster属性做交互封面——它不可点击、无 hover 效果、无法加阴影或动画 - 若需首帧截图作封面，用服务端生成或
canvas截取，不要靠 JS 播放一帧再暂停，移动端兼容差 - 按钮的
onclick回调里直接调用video.play()，不要套setTimeout或Promise.then - 播放成功后立刻
button.remove()或设display: none；失败时保留按钮，并提示“请手动允许播放” - 捕获
play事件而非playing，前者表示播放已发起，后者可能因缓冲延迟触发 - 对 iOS，额外加
video.muted = true; video.play()可提高成功率（尤其静音视频）
video 标签没加载完成时如何显示封面和按钮
浏览器默认会在 video 加载元数据前显示黑屏，而不是封面。必须手动控制显隐逻辑。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
按钮点击后如何正确触发播放并隐藏自身
直接调用 video.play() 在 iOS 和新版 Chrome 上大概率被拦截，必须由用户手势（click/tap）触发，且不能包裹在异步回调里。
实操建议：
最易被忽略的是：封面图宽高比必须与 video 一致，否则切换瞬间会闪动或拉伸；按钮的 transform: translate(-50%, -50%) 定位要配合 left: 50%; top: 50% 使用，否则在 zoom 缩放下偏移量会失准。
