Npmlibrary

Live

预计阅读时间: 4 分钟

Live 功能提供对 Video.js 播放器直播状态的访问和管理，专门用于处理直播流的时间相关状态。

概述

Live 功能是 Video.js React 中用于管理直播流状态的模块。它提供直播边缘检测和目标直播窗口配置，对于构建直播播放器界面至关重要。

状态

属性	类型	描述
`liveEdgeStart`	`number`	直播边缘开始时间（秒）
`targetLiveWindow`	`number`	目标直播窗口大小（秒）

状态说明

liveEdgeStart：当前直播流的边缘开始时间，这是观众可以看到的最新的直播内容时间点
targetLiveWindow：播放器尝试保持的直播窗口大小，默认通常为直播流的持续时间

操作

Live 功能不提供直接的操作。如需调整直播状态，通常通过播放新源或其他功能模块进行。

选择器

传递 selectLive 到 usePlayer 钩子以订阅直播状态。

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

function LiveStatus() {
  const live = usePlayer(selectLive);
  
  return (
    <div>
      <p>直播边缘开始时间: {live.liveEdgeStart}秒</p>
      <p>目标直播窗口: {live.targetLiveWindow}秒</p>
    </div>
  );
}

示例

直播指示器

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

function LiveIndicator() {
  const live = usePlayer(selectLive);
  const time = usePlayer(selectTime);
  
  // 判断是否在直播边缘
  const isOnLiveEdge = time.duration > 0 && 
    Math.abs(time.currentTime - live.liveEdgeStart) < 5;
  
  return (
    <div className={`live-indicator ${isOnLiveEdge ? 'on-edge' : 'behind'}`}>
      <span className="live-dot"></span>
      <span>LIVE</span>
      {!isOnLiveEdge && <span className="behind-text">(落后)</span>}
    </div>
  );
}

直播进度条

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

function LiveProgressBar() {
  const live = usePlayer(selectLive);
  const time = usePlayer(selectTime);
  
  if (!live.liveEdgeStart || !time.duration) return null;
  
  // 计算当前时间在直播流中的位置
  const progress = Math.min(100, (time.currentTime / live.liveEdgeStart) * 100);
  
  return (
    <div className="live-progress-container">
      <div className="live-progress-track">
        <div 
          className="live-progress-bar"
          style={{ width: `${progress}%` }}
        />
        {/* 直播边缘标记 */}
        <div 
          className="live-edge-marker"
          style={{ left: '100%' }}
        />
      </div>
      <div className="live-time-labels">
        <span>0:00</span>
        <span>直播中</span>
      </div>
    </div>
  );
}

追赶播放提示

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

function CatchUpNotice() {
  const live = usePlayer(selectLive);
  const time = usePlayer(selectTime);
  const { seek } = usePlayerActions();
  
  // 计算落后时间
  const lagTime = live.liveEdgeStart - time.currentTime;
  const isBehindLive = lagTime > 10; // 超过10秒视为落后
  
  const handleJumpToLive = () => {
    seek(live.liveEdgeStart);
  };
  
  if (!isBehindLive) return null;
  
  return (
    <div className="catch-up-notice">
      <p>您已落后直播 {Math.floor(lagTime)} 秒</p>
      <button onClick={handleJumpToLive}>
        跳到直播
      </button>
    </div>
  );
}

禁用回看功能

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

function LiveOnlyPlayer() {
  const live = usePlayer(selectLive);
  const time = usePlayer(selectTime);
  const { seek } = usePlayerActions();
  
  // 禁止用户回看直播内容
  const handleSeek = (newTime: number) => {
    if (newTime > live.liveEdgeStart) {
      seek(live.liveEdgeStart);
    }
  };
  
  // 定期检查并校正到直播边缘
  const checkAndCorrectPosition = () => {
    if (time.currentTime < live.liveEdgeStart - 1) {
      seek(live.liveEdgeStart);
    }
  };
  
  return (
    <div className="live-only-player">
      {/* 播放器内容 */}
      {/* 直播内容区域 */}
    </div>
  );
}

注意事项

直播流专用：Live 功能主要适用于直播流（HLS/DASH 等）
时移限制：部分直播可能限制回看时间范围
边缘检测：实时计算直播边缘位置
同步问题：网络延迟可能导致边缘时间不准确
播放器配置：部分设置需要在播放器初始化时配置

#Live

#概述

#状态

#状态说明

#操作

#选择器

#示例

#直播指示器

#直播进度条

#追赶播放提示

#禁用回看功能

#注意事项