如何自定义React Player播放不存在视频时的错误提示信息？

当然可以自定义错误提示，React Player本身没提供直接修改默认文案的配置，但可以通过两种方式实现：

方式一：监听错误事件，切换自定义状态显示 #

通过React Player的onError事件捕获错误，判断是否是视频不存在的场景，然后用状态控制显示自定义提示，替代默认错误信息。

示例代码：

import React, { useState } from 'react';
import ReactPlayer from 'react-player';

const CustomVideoPlayer = ({ url }) => {
  const [showUploadTip, setShowUploadTip] = useState(false);

  const handleVideoError = (error) => {
    // 匹配默认错误提示关键词，判断是否为视频不存在的情况
    // 也可以根据实际返回的错误信息调整判断逻辑，比如检测HTTP 404状态
    if (error.message.includes('未找到支持格式和MIME类型的视频')) {
      setShowUploadTip(true);
    }
  };

  return (
    <div className="video-player-container">
      {showUploadTip ? (
        <p className="upload-tip">请上传视频？</p>
      ) : (
        <ReactPlayer 
          url={url} 
          onError={handleVideoError} 
          controls 
          width="100%"
          height="auto"
        />
      )}
    </div>
  );
};

export default CustomVideoPlayer;

注意：实际测试时，建议查看onError返回的error对象具体内容，比如Cloudfront返回404时是否能拿到状态码，用更精准的条件判断，避免误触发提示。

方式二：覆盖默认样式，隐藏原错误提示 #

如果不想替换整个组件显示，也可以通过CSS隐藏React Player自带的错误提示，再在组件内添加自定义错误元素，结合状态控制显示：

首先添加CSS隐藏默认错误提示：

.react-player__error {
  display: none !important;
}

然后组件逻辑和方式一类似，当错误触发时显示自定义提示即可。

内容的提问来源于stack exchange，提问作者orhai