Npmlibrary

MuteButton

预计阅读时间: 2 分钟

静音/取消静音切换按钮，具有键盘支持和音量状态反射功能。

结构

<MuteButton />

行为

切换静音的开启和关闭，并根据当前音量和静音状态暴露派生的 volumeLevel。

样式

根据静音状态设置按钮样式：

.mute-button[data-muted] .icon-muted { display: inline; }
.mute-button:not([data-muted]) .icon-unmuted { display: inline; }

使用 data-volume-level 进行多级图标切换：

.mute-button[data-volume-level="off"] .icon-off { display: inline; }
.mute-button[data-volume-level="low"] .icon-low { display: inline; }
.mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
.mute-button[data-volume-level="high"] .icon-high { display: inline; }

无障碍

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

示例

基本用法

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

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

自定义渲染

<MuteButton
  render={(props, state) => (
    <button {...props}>
      {state.muted ? '取消静音' : '静音'}
    </button>
  )}
/>

API 参考

属性

属性	类型	默认值	描述
`disabled`	`boolean`	`false`	是否禁用按钮
`label`	`string`	自动	覆盖默认的 aria-label
`render`	`RenderProp`	-	自定义渲染函数

状态

状态	类型	描述
`muted`	`boolean`	是否静音
`volumeLevel`	`"off" \| "low" \| "medium" \| "high"`	当前音量级别
`label`	`string`	当前按钮标签

Data 属性

属性	值	描述
`data-muted`	-	当静音时存在
`data-volume-level`	`"off" \| "low" \| "medium" \| "high"`	当前音量级别

参见

VolumeSlider - 音量滑块
PlayButton - 播放按钮

#MuteButton

#结构

#行为

#样式

#无障碍

#示例

#基本用法

#自定义渲染

#API 参考

#属性

#状态

#Data 属性

#参见

MuteButton

结构

行为

样式

无障碍

示例

基本用法

自定义渲染

API 参考

属性

状态

Data 属性

参见