Npmlibrary

BufferingIndicator

预计阅读时间: 2 分钟

当媒体正在等待缓冲且未暂停时显示加载指示器。

结构

<BufferingIndicator />

行为

当媒体正在等待缓冲且未暂停时显示加载指示器，但仅在可配置的 delay（默认 500ms）之后。此延迟防止指示器在短暂卡顿时闪烁。缓冲结束时指示器立即隐藏。

样式

根据 data-visible 属性隐藏和显示指示器：

.buffering-indicator:not([data-visible]) {
  display: none;
}

示例

基本用法

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

function Player() {
  return (
    <Player.Container>
      <video src="video.mp4" />
      <BufferingIndicator />
    </Player.Container>
  );
}

API 参考

属性

属性	类型	默认值	描述
`delay`	`number`	`500`	缓冲指示器显示前的延迟时间（毫秒），防止短暂卡顿时闪烁
`render`	`RenderProp`	-	自定义渲染函数

状态

状态	类型	描述
`visible`	`boolean`	指示器是否可见

Data 属性

属性	值	描述
`data-visible`	-	当指示器可见时存在

参见

Controls - 控件容器
Player.Container - 播放器容器

#BufferingIndicator

#结构

#行为

#样式

#示例

#基本用法

#API 参考

#属性

#状态

#Data 属性

#参见

BufferingIndicator

结构

行为

样式

示例

基本用法

API 参考

属性

状态

Data 属性

参见