最稳妥的圆圈播放按钮HTML结构是用<div class="video-cover">包裹封面图和<button class="play-btn">，内部嵌套固定64px宽高的<svg>，其中用<circle>绘背景、<path>绘三角形，按钮需设aria-label并确保muted属性在video标签中排首位。
圆圈播放按钮的 HTML 结构怎么写才不卡顿
直接用 <div> 套 <svg> 最稳妥，别用纯 CSS 画圆 + 伪元素模拟——iOS Safari 和旧版 Android WebView 渲染时容易错位或失真。
关键点是：按钮必须是独立可点击区域，不能依赖父容器的 pointer-events 透传。
- 外层用
<div class="video-cover">包裹封面图和按钮，设为position: relative - 播放图标用
<svg>写死路径（别用<use>引外部 sprite），宽高固定为64px，避免缩放模糊 -
<svg>里用<circle>绘背景圆，<path>绘三角形，不要用<polygon>—— 部分安卓系统对fill-rule解析不一致
SVG 播放图标颜色和尺寸怎么适配不同封面图
别在 CSS 里用 filter: brightness() 调 SVG 颜色，它会把整个按钮变灰或发白；直接改 <circle> 的 fill 和 <path> 的 fill 属性更可控。
- 默认圆圈用
#fff，三角用#000，适合深色封面；浅色封面则反过来，用#000圆 +#fff三角 - 尺寸统一用
viewBox="0 0 64 64"，CSS 中用width: 64px; height: 64px;固定，禁用max-width: 100%—— 否则在高 DPR 屏幕上会糊 - 如果封面图带毛玻璃效果（
backdrop-filter），按钮容器要加isolation: isolate，否则 SVG 可能被滤镜拖慢
点击区域太小？别只靠 padding 扩展
移动端手指点击误差大，单纯给 SVG 加 padding 不生效（SVG 内部不响应 padding），得用「透明包裹层」+ 「负 margin」组合。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在
<svg>外套一层<button type="button" class="play-btn">，设width: 88px; height: 88px; - SVG 本身保持
64px，用margin: -12px居中，让点击热区超出视觉范围但不破坏布局 - 按钮必须加
aria-label="播放视频"，否则 iOS VoiceOver 会读成「按钮」而不知用途 - 禁用
outline: none—— 键盘聚焦时失去可见反馈，WCAG 不合规
视频自动播放失败？先检查这个属性顺序
封面按钮点击后调 video.play()，但 Chrome 和 Safari 对 muted、autoplay、playsinline 的组合非常敏感，顺序错了就静音也不播。
立即学习“前端免费学习笔记（深入）”；
-
<video>标签必须同时带muted、autoplay、playsinline三个布尔属性 -
muted必须写在最前面，比如：<video muted autoplay playsinline>—— 把它放后面，Safari 16+ 会忽略autoplay - 调
play()前先确保video.readyState >= 2，否则可能报DOMException: The element has no supported sources - 别用
setTimeout延迟播放，iOS 上超过 500ms 就算用户手势过期，直接拒绝
圆圈按钮看着简单，但 SVG 渲染、点击热区、视频策略这三块全在浏览器底层打架，每个细节松一扣，上线后就卡在某个机型上动不了。
