#PlayButton

播放/暂停切换按钮，具有键盘支持和可自定义渲染功能。

#结构

<PlayButton />

#行为

PlayButton 是一个三态按钮：播放、暂停和重播。当媒体到达末尾（ended 状态）时，点击会从头开始重新播放。

#样式

使用 [data-paused] 和 [data-ended] 属性根据状态显示/隐藏播放/暂停/重播图标：

/* 暂停（但未结束） */
.play-button[data-paused]:not([data-ended]) .play-icon { display: inline; }

/* 播放中 */
.play-button:not([data-paused]) .pause-icon { display: inline; }

/* 已结束 */
.play-button[data-ended] .replay-icon { display: inline; }

首次播放后，data-started 属性被添加并保持存在，直到加载新源。使用此属性在媒体尚未开始时隐藏播放按钮：

/* 首次播放前隐藏播放按钮 */
.play-button:not([data-started]) .play-icon { display: none; }

#无障碍

渲染一个 <button> 元素，带有根据状态自动更新的 aria-label："Play"、"Pause" 或 "Replay"。可通过 label 属性覆盖（接受字符串或函数）。键盘激活：Enter / Space。

#示例

#基本用法

import { PlayButton } from '@videojs/react';

function Controls() {
  return <PlayButton />;
}

#自定义渲染

<PlayButton
  render={(props, state) => (
    <button {...props}>
      {state.paused ? '播放' : '暂停'}
    </button>
  )}
/>

#API 参考

#属性

#状态

#Data 属性

#参见

• MuteButton - 静音按钮
• FullscreenButton - 全屏按钮
• SeekButton - 跳转按钮