总站首页
首页
目录
Koffi中文文档
video.js中文文档
KubeJS中文文档
总站首页
首页
目录
Koffi中文文档
video.js中文文档
KubeJS中文文档
Npmlibrary

Buffer

预计阅读时间: 3 分钟

Buffer 功能提供对 Video.js 播放器缓冲状态的只读访问。它允许你监听视频的已缓冲时间范围和可查找时间范围。

概述

Buffer 功能是 Video.js React 中用于管理缓冲相关状态的模块。它提供只读状态，包括已缓冲区域和可查找区域的时间范围，这对于实现进度条显示和缓冲指示器等功能至关重要。

状态

属性类型描述
bufferedTimeRange[]已缓冲的时间范围数组
seekableTimeRange[]可查找的时间范围数组

TimeRange 结构

每个 TimeRange 包含以下属性：

属性类型描述
startnumber时间范围的开始时间（秒）
endnumber时间范围的结束时间（秒）
lengthnumber范围的数量

操作

Buffer 功能提供只读状态，不支持直接操作。如需触发缓冲更新，可以通过 loadSource 操作加载新的媒体源。

选择器

传递 selectBuffer 到 usePlayer 钩子以订阅缓冲状态。

import { selectBuffer, usePlayer } from '@videojs/react';

function BufferStatus() {
  const buffer = usePlayer(selectBuffer);
  
  return (
    <div>
      <h3>缓冲状态</h3>
      <p>已缓冲区域数量: {buffer.buffered.length}</p>
      {buffer.buffered.map((range, index) => (
        <div key={index}>
          范围 {index + 1}: {range.start.toFixed(2)}s - {range.end.toFixed(2)}s
        </div>
      ))}
      <p>可查找区域数量: {buffer.seekable.length}</p>
      {buffer.seekable.map((range, index) => (
        <div key={index}>
          可查找 {index + 1}: {range.start.toFixed(2)}s - {range.end.toFixed(2)}s
        </div>
      ))}
    </div>
  );
}

示例

显示缓冲进度

import { selectBuffer, selectTime, usePlayer } from '@videojs/react';

function BufferProgress() {
  const buffer = usePlayer(selectBuffer);
  const time = usePlayer(selectTime);
  
  // 计算当前时间的缓冲百分比
  const getBufferedPercentage = () => {
    if (!buffer.buffered.length || !time.duration) return 0;
    
    for (const range of buffer.buffered) {
      if (time.currentTime >= range.start && time.currentTime <= range.end) {
        return ((range.end - time.currentTime) / time.duration) * 100;
      }
    }
    return 0;
  };
  
  return (
    <div className="buffer-indicator">
      缓冲进度: {getBufferedPercentage().toFixed(1)}%
    </div>
  );
}

自定义缓冲条

import { selectBuffer, selectTime, usePlayer } from '@videojs/react';

function CustomBufferBar() {
  const buffer = usePlayer(selectBuffer);
  const time = usePlayer(selectTime);
  
  if (!time.duration) return null;
  
  // 生成缓冲段落的渲染数据
  const bufferSegments = buffer.buffered.map((range, index) => {
    const left = (range.start / time.duration) * 100;
    const width = ((range.end - range.start) / time.duration) * 100;
    return { key: index, left: `${left}%`, width: `${width}%` };
  });
  
  return (
    <div className="buffer-bar">
      {bufferSegments.map((seg) => (
        <div
          key={seg.key}
          className="buffer-segment"
          style={{ left: seg.left, width: seg.width }}
        />
      ))}
    </div>
  );
}

注意事项

  1. 只读状态：Buffer 状态是只读的，无法直接修改
  2. 时间范围：缓冲和使用程序接口提供的是 TimeRange 对象，不是简单的数组
  3. 异步更新：缓冲状态会随着播放进度自动更新
  4. 直播流：对于直播流，seekable 范围可能为空或不准确
目录