Npmlibrary

Error

预计阅读时间: 4 分钟

Error 功能提供对 Video.js 播放器错误状态的访问和管理。当播放器遇到错误时，相关错误信息会存储在此状态中。

概述

Error 功能是 Video.js React 中用于管理播放器错误状态的模块。它提供只读的错误状态和用于清除错误的操作，这对于实现错误处理和用户友好错误提示至关重要。

状态

属性	类型	描述
`error`	`MediaError \| null`	当前错误对象，无错误时为 `null`

MediaError 结构

MediaError 包含以下属性：

属性	类型	描述
`code`	`number`	错误代码
`message`	`string`	错误消息描述
`type`	`string`	错误类型

常见错误代码

代码	描述
`1`	用户中断
`2`	网络错误
`3`	解码错误
`4`	URL 无效或不支持

操作

操作	类型	描述
`dismissError`	`Action`	清除当前错误状态

dismissError

清除当前错误，将 error 状态设置为 null。

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

function ErrorDisplay() {
  const error = usePlayer(selectError);
  const { dismissError } = usePlayerActions();
  
  if (!error.error) return null;
  
  return (
    <div className="error-overlay">
      <div className="error-content">
        <h2>播放错误</h2>
        <p>错误代码: {error.error.code}</p>
        <p>{error.error.message}</p>
        <button onClick={dismissError}>关闭</button>
      </div>
    </div>
  );
}

选择器

传递 selectError 到 usePlayer 钩子以订阅错误状态。

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

function ErrorStatus() {
  const error = usePlayer(selectError);
  
  return (
    <div>
      {error.error ? (
        <div className="error-display">
          错误: {error.error.message} (代码: {error.error.code})
        </div>
      ) : (
        <div className="no-error">无错误</div>
      )}
    </div>
  );
}

示例

错误提示组件

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

function ErrorAlert() {
  const error = usePlayer(selectError);
  
  if (!error.error) return null;
  
  const getErrorMessage = (code: number) => {
    const messages: Record<number, string> = {
      1: '用户中断了播放',
      2: '网络连接出现问题，请检查网络',
      3: '视频格式不支持或解码失败',
      4: '视频地址无效'
    };
    return messages[code] || '未知错误';
  };
  
  return (
    <div className="error-alert" role="alert">
      <span className="error-icon">!</span>
      <span className="error-text">{getErrorMessage(error.error.code)}</span>
    </div>
  );
}

带重试功能的错误处理

import { selectError, selectSource, usePlayer, usePlayerActions } from '@videojs/react';
import { useState } from 'react';

function ErrorWithRetry() {
  const error = usePlayer(selectError);
  const source = usePlayer(selectSource);
  const { loadSource, dismissError } = usePlayerActions();
  const [retryCount, setRetryCount] = useState(0);
  
  const handleRetry = () => {
    setRetryCount(prev => prev + 1);
    dismissError();
    // 重新加载当前源
    if (source.source) {
      loadSource(source.source);
    }
  };
  
  if (!error.error) return null;
  
  return (
    <div className="error-retry-container">
      <p>播放失败: {error.error.message}</p>
      <button onClick={handleRetry}>
        重试 ({retryCount})
      </button>
    </div>
  );
}

网络错误自动重试

import { selectError, usePlayer, usePlayerActions } from '@videojs/react';
import { useEffect, useRef } from 'react';

function AutoRetryOnNetworkError() {
  const error = usePlayer(selectError);
  const { loadSource, dismissError } = usePlayerActions();
  const retryTimeoutRef = useRef<NodeJS.Timeout>();
  
  useEffect(() => {
    if (error.error?.code === 2) { // 网络错误
      // 5秒后自动重试
      retryTimeoutRef.current = setTimeout(() => {
        dismissError();
      }, 5000);
    }
    
    return () => {
      if (retryTimeoutRef.current) {
        clearTimeout(retryTimeoutRef.current);
      }
    };
  }, [error.error, dismissError]);
  
  return null; // 不显示任何UI
}

注意事项

空状态：当没有错误时，error 值为 null
自动清除：某些操作可能会自动清除错误状态
错误持久性：错误状态会保持直到手动清除或播放新内容
错误代码：使用错误代码进行条件渲染和用户提示

#Error

#概述

#状态

#MediaError 结构

#常见错误代码

#操作

#dismissError

#选择器

#示例

#错误提示组件

#带重试功能的错误处理

#网络错误自动重试

#注意事项