SeekButton

预计阅读时间: 2 分钟

快进或快退指定秒数的无障碍跳转按钮。

结构

<SeekButton />

行为

按可配置的 seconds(默认 30)跳转媒体。正值快进,负值快退。跳转范围限制在媒体边界内(0 到 duration)。

无障碍

渲染一个 <button> 元素,带有自动的 aria-label 描述操作,例如 "Seek forward 30 seconds" 或 "Seek backward 10 seconds"。可通过 label 属性覆盖。键盘激活:Enter / Space

示例

基本用法

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

function Controls() {
  return (
    <>
      {/* 快退 10 秒 */}
      <SeekButton seconds={-10} />
      {/* 快进 30 秒(默认) */}
      <SeekButton />
    </>
  );
}

API 参考

属性

属性类型默认值描述
secondsnumber30跳转秒数,正数快进,负数快退
disabledbooleanfalse是否禁用按钮
labelstring自动覆盖默认的 aria-label
renderRenderProp-自定义渲染函数

状态

状态类型描述
seekingboolean是否正在跳转
labelstring当前按钮标签

Data 属性

属性描述
data-seeking-当正在跳转时存在

参见