Npmlibrary

StreamType

预计阅读时间: 4 分钟

StreamType 功能提供对 Video.js 播放器当前媒体流类型的检测和状态管理。

概述

StreamType 功能是 Video.js React 中用于检测和管理流类型的模块。它自动识别视频是点播（on-demand）、直播（live）还是未知类型，为不同类型的流提供相应的处理逻辑。

状态

属性	类型	描述
`streamType`	`'on-demand' \| 'live' \| 'unknown'`	当前流的类型

状态说明

on-demand：点播视频，可以暂停、快进快退
live：直播流，通常不支持回看和跳转
unknown：无法确定的流类型

操作

StreamType 功能提供只读状态，不支持直接操作。流类型由播放器根据媒体源自动检测。

选择器

传递 selectStreamType 到 usePlayer 钩子以订阅流类型状态。

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

function StreamTypeDisplay() {
  const streamType = usePlayer(selectStreamType);
  
  return (
    <div>
      <p>流类型: {streamType.streamType}</p>
    </div>
  );
}

示例

流类型指示器

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

function StreamTypeIndicator() {
  const streamType = usePlayer(selectStreamType);
  
  const getIndicatorStyle = () => {
    switch (streamType.streamType) {
      case 'live':
        return 'live-indicator';
      case 'on-demand':
        return 'vod-indicator';
      default:
        return 'unknown-indicator';
    }
  };
  
  const getLabel = () => {
    switch (streamType.streamType) {
      case 'live':
        return '直播';
      case 'on-demand':
        return '点播';
      default:
        return '未知';
    }
  };
  
  return (
    <div className={`stream-type-indicator ${getIndicatorStyle()}`}>
      <span className="dot"></span>
      <span className="label">{getLabel()}</span>
    </div>
  );
}

动态控制栏

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

function AdaptiveControls() {
  const streamType = usePlayer(selectStreamType);
  const controls = usePlayer(selectControls);
  
  return (
    <div className="controls-container">
      {/* 直播流隐藏进度条 */}
      {streamType.streamType !== 'live' && (
        <div className="progress-bar">进度条</div>
      )}
      
      {/* 直播流显示 LIVE 标签 */}
      {streamType.streamType === 'live' && (
        <div className="live-badge">LIVE</div>
      )}
      
      {/* 进度时间显示（仅点播） */}
      {streamType.streamType === 'on-demand' && (
        <div className="time-display">时间</div>
      )}
    </div>
  );
}

跳转控制

import { selectStreamType, usePlayer, usePlayerActions } from '@videojs/react';
import { selectTime, usePlayer as usePlayerSelector } from '@videojs/react';

function SeekControls() {
  const streamType = usePlayer(selectStreamType);
  const time = usePlayerSelector(selectTime);
  const { seek } = usePlayerActions();
  
  // 直播流禁用跳转
  const isSeekDisabled = streamType.streamType === 'live' || 
                          streamType.streamType === 'unknown';
  
  const handleSeekForward = () => {
    if (isSeekDisabled) return;
    seek(time.currentTime + 10);
  };
  
  const handleSeekBackward = () => {
    if (isSeekDisabled) return;
    seek(time.currentTime - 10);
  };
  
  return (
    <div className="seek-controls">
      <button 
        onClick={handleSeekBackward}
        disabled={isSeekDisabled}
      >
        快退10秒
      </button>
      <button 
        onClick={handleSeekForward}
        disabled={isSeekDisabled}
      >
        快进10秒
      </button>
      {isSeekDisabled && (
        <span className="seek-disabled-notice">直播流不支持跳转</span>
      )}
    </div>
  );
}

播放结束处理

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

function EndScreen() {
  const streamType = usePlayer(selectStreamType);
  const playback = usePlayer(selectPlayback);
  
  // 直播流不显示播放结束
  if (streamType.streamType === 'live') {
    return null;
  }
  
  if (!playback.ended) return null;
  
  return (
    <div className="end-screen">
      <h2>播放结束</h2>
      <button>重新播放</button>
    </div>
  );
}

UI 适配

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

function StreamTypeUI() {
  const streamType = usePlayer(selectStreamType);
  
  const containerClass = `player-container ${streamType.streamType === 'live' ? 'live-mode' : 'vod-mode'}`;
  
  return (
    <div className={containerClass}>
      {/* 根据流类型调整 UI */}
      {streamType.streamType === 'live' && (
        <>
          <div className="live-toolbar">
            {/* 直播专用工具栏 */}
          </div>
          <div className="live-chat">
            {/* 直播聊天区域 */}
          </div>
        </>
      )}
      {streamType.streamType === 'on-demand' && (
        <>
          <div className="vod-sidebar">
            {/* 点播侧边栏 */}
          </div>
          <div className="related-videos">
            {/* 相关视频推荐 */}
          </div>
        </>
      )}
    </div>
  );
}

注意事项

自动检测：流类型由播放器根据媒体源自动检测
直播标识：部分直播流可能没有正确的标识
类型切换：某些自适应流可能在播放过程中切换类型
插件支持：HLS 和 DASH 插件会影响类型检测准确性
用户感知：正确显示流类型可以提升用户体验

#StreamType

#概述

#状态

#状态说明

#操作

#选择器

#示例

#流类型指示器

#动态控制栏

#跳转控制

#播放结束处理

#UI 适配

#注意事项