Npmlibrary

TimeSlider

预计阅读时间: 3 分钟

用于在媒体播放时间中跳转的滑块组件。

结构

<TimeSlider.Root />

嵌套子组件以完全控制滑块的 DOM 结构：

<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.Fill />
    <TimeSlider.Buffer />
  </TimeSlider.Track>
  <TimeSlider.Thumb />
  <TimeSlider.Preview>
    <TimeSlider.Thumbnail />
    <TimeSlider.Value type="pointer" />
  </TimeSlider.Preview>
</TimeSlider.Root>

行为

显示和控制当前播放位置。拖动滑块跳转媒体。填充级别反映 currentTime / duration 的百分比，缓冲级别显示已缓冲的媒体量。

拖动期间的值变化通过 changeThrottle 属性（默认 100ms）进行节流，使用前导+尾随节流来保持 UI 响应性而不使媒体元素不堪重负。

样式

使用 CSS 自定义属性设置填充、指针和缓冲级别：

.time-slider::before {
  width: var(--media-slider-fill);
}

使用 data-seeking 在活动跳转操作期间设置样式：

.time-slider[data-seeking] {
  opacity: 0.8;
}

无障碍

渲染 role="slider" 和自动的 aria-label："Seek"。可通过 label 属性覆盖。键盘控件：

Arrow Left / Arrow Right：按 step 增量步进
Page Up / Page Down：按 largeStep 增量步进
Home：跳到开始
End：跳到结束

示例

基本用法

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

function Controls() {
  return <TimeSlider.Root />;
}

完整部件

包含轨道、填充条、缓冲指示器、可拖动手柄和显示悬停时间的工具提示。

<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.Fill />
    <TimeSlider.Buffer />
  </TimeSlider.Track>
  <TimeSlider.Thumb />
  <TimeSlider.Preview>
    <TimeSlider.Thumbnail />
    <TimeSlider.Value type="pointer" />
  </TimeSlider.Preview>
</TimeSlider.Root>

API 参考

复合组件

部件	描述
`TimeSlider.Root`	时间滑块根组件
`TimeSlider.Track`	滑块轨道背景
`TimeSlider.Fill`	填充部分，表示当前播放位置
`TimeSlider.Buffer`	缓冲指示器
`TimeSlider.Thumb`	可拖动的滑块手柄
`TimeSlider.Preview`	悬停预览容器
`TimeSlider.Thumbnail`	预览中的缩略图
`TimeSlider.Value`	值显示（current 或 pointer）

TimeSlider.Root 属性

属性	类型	默认值	描述
`label`	`string`	`"Seek"`	aria-label
`step`	`number`	`1`	键盘步进增量（秒）
`largeStep`	`number`	`10`	大步进增量（秒）
`changeThrottle`	`number`	`100`	拖动时节流间隔（毫秒）

状态

状态	类型	描述
`seeking`	`boolean`	是否正在跳转
`value`	`number`	当前值
`interactive`	`boolean`	是否正在交互

Data 属性

属性	值	描述
`data-seeking`	-	正在跳转时存在
`data-interactive`	-	正在交互时存在
`data-pointing`	-	指针悬停时存在

CSS 自定义属性

属性	描述
`--media-slider-fill`	填充百分比
`--media-slider-pointer`	指针位置百分比
`--media-slider-buffer`	缓冲百分比

参见

Slider - 滑块基础组件
VolumeSlider - 音量滑块
Time - 时间显示

#TimeSlider

#结构

#行为

#样式

#无障碍

#示例

#基本用法

#完整部件

#API 参考

#复合组件

#TimeSlider.Root 属性

#状态

#Data 属性

#CSS 自定义属性

#参见