FullscreenButton

预计阅读时间: 2 分钟

全屏切换按钮,具有键盘支持和状态反射功能。

结构

<FullscreenButton />

行为

切换全屏模式。通过 availability 检测平台支持 — 当全屏为 "unsupported" 时,切换操作无效。

样式

你可以根据全屏状态设置按钮样式:

/* 全屏状态 */
.fullscreen-button[data-fullscreen] {
  background: red;
}

当不支持全屏时考虑隐藏按钮:

.fullscreen-button[data-availability="unsupported"] {
  display: none;
}

无障碍

渲染一个 <button> 元素,带有自动的 aria-label:"Enter fullscreen" 或 "Exit fullscreen"。可通过 label 属性覆盖。键盘激活:Enter / Space

示例

基本用法

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

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

API 参考

属性

属性类型默认值描述
disabledbooleanfalse是否禁用按钮
labelstring自动覆盖默认的 aria-label
renderRenderProp-自定义渲染函数

状态

状态类型描述
availability"available" | "unsupported"全屏功能的可用性
fullscreenboolean是否处于全屏状态
labelstring当前按钮标签

Data 属性

属性描述
data-fullscreen-当处于全屏状态时存在
data-availability"available" | "unsupported"全屏功能的可用性状态

参见