#CaptionsButton

字幕和字幕切换按钮，具有可用性检测和状态反射功能。

#结构

<CaptionsButton />

#行为

切换字幕和字幕的开启和关闭。按钮检查媒体的文本轨道列表中 kind="captions" 或 kind="subtitles" 的轨道，并通过 data-availability 反映可用性。

当没有字幕或字幕轨道时，设置 data-availability="unavailable"。使用此属性在没有可切换轨道时隐藏按钮。

#样式

根据活动状态设置按钮样式：

.captions-button[data-active] .icon-on { display: inline; }
.captions-button:not([data-active]) .icon-off { display: inline; }

当没有字幕轨道可用时隐藏：

.captions-button[data-availability="unavailable"] {
  display: none;
}

#无障碍

渲染一个 <button> 元素，带有自动的 aria-label：活动时为 "Disable captions"，非活动时为 "Enable captions"。可通过 label 属性覆盖。键盘激活：Enter / Space。

#示例

#基本用法

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

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

#API 参考

#属性

#状态

#Data 属性

#参见

• Controls - 控件容器
• MuteButton - 静音按钮