video-play.md
组件 · COMPONENT

视频播放键 VideoPlay

全站唯一允许为圆形的交互键。圆形不是装饰例外，而是「点按即开始播放」这个媒体语义的通用符号——导学封面与所有课时海报共用这一个原件。

来源设计系统源码源styles/v4/controls.css机读components/video-play.md
72px 纸面凸键悬停外圈变亮、居中版放大 1.06；按下内陷
export function PlayButton() {
  return (
    <button type="button" className="zzm-video-play" aria-label="播放">
      <svg className="zzm-video-play__icon" viewBox="0 0 20 20" aria-hidden="true">
        <path d="M7 4.5 L15.5 10 L7 15.5 Z" />
      </svg>
    </button>
  )
}

在海报上居中

加 --center 修饰：绝对定位到父容器正中，悬停 / 按压的缩放也由它接管。父容器需要 position: relative。

课时海报 16:9
export function OnPoster() {
  return (
    <div style={{ position: 'relative', width: 480, maxWidth: '100%', aspectRatio: '16/9', borderRadius: 12, background: '#131316', overflow: 'hidden' }}>
      <button type="button" className="zzm-video-play zzm-video-play--center" aria-label="播放本节">
        <svg className="zzm-video-play__icon" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M7 4.5 L15.5 10 L7 15.5 Z" />
        </svg>
      </button>
    </div>
  )
}
导学封面 4:3导学封面位固定 4:3，封面图 contain 完整展示
export function GuideCover() {
  return (
    <div style={{ position: 'relative', width: 360, maxWidth: '100%', aspectRatio: '4/3', borderRadius: 12, background: '#0E0E10', overflow: 'hidden' }}>
      <button type="button" className="zzm-video-play zzm-video-play--center" aria-label="播放导学">
        <svg className="zzm-video-play__icon" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M7 4.5 L15.5 10 L7 15.5 Z" />
        </svg>
      </button>
    </div>
  )
}

类名

类作用
.zzm-video-play72×72 圆形纸面凸键，墨色三角，键盘焦点为朱色光晕
.zzm-video-play--center绝对居中于父容器（translate -50% -50%）
.zzm-video-play__icon24px 三角图标，左移 4px 做视觉居中

铁律

✓ 要只用于「点按即开始播放」
✗ 不要借它的圆形去做别的按钮——文字按钮仍然是圆角矩形
✓ 要导学封面与课时海报用同一个原件
✗ 不要在不同页面给同一个动作画不同的播放键