#Time

用于显示当前时间、时长和剩余时间的时间显示组件。

#结构

<Time.Group>
  <Time.Value type="current" />
  <Time.Separator />
  <Time.Value type="duration" />
</Time.Group>

#行为

三种显示类型 — current、duration 和 remaining — 以数字格式显示，带有智能填充：

• 小时从不填充（1:05:30，而不是 01:05:30）
• 分钟在显示小时时填充（1:05:30，但 5:30）
• 秒始终填充（1:05，而不是 1:5）

当当前值或时长超过 1 小时时触发小时显示，确保 Group 内的一致性。剩余时间显示负号（可通过 negativeSign 属性自定义）。

#样式

负号渲染在 <span aria-hidden="true"> 内，可以用 CSS 隐藏：

[data-type="remaining"] > span[aria-hidden] {
  display: none;
}

#无障碍

每个 <Time.Value> 具有：

• aria-label 用于静态角色标签（"Current time"、"Duration"、"Remaining"）
• aria-valuetext 用于动态的人类可读时间（"1 minute, 30 seconds"）

不使用 aria-live 区域 — 时间更新过于频繁，可能会使屏幕阅读器不堪重负。分隔符为 aria-hidden="true"，因为屏幕阅读器已经分别听到每个时间值。负号也是 aria-hidden，因为 aria-valuetext 已经传达了 "remaining"。在 React 中，<time datetime> 为解析器提供机器可读的时间。

#示例

#当前时间

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

function CurrentTimeDisplay() {
  return <Time.Value type="current" />;
}

#当前时间 / 时长

<Time.Group>
  <Time.Value type="current" />
  <Time.Separator />
  <Time.Value type="duration" />
</Time.Group>

#剩余时间

<Time.Value type="remaining" />

#API 参考

#复合组件

#Time.Value 属性

#状态

#参见

• TimeSlider - 时间滑块
• Controls - 控件容器