如何不依赖MediaStream加载本地文件URL视频？ReactPlayer报错求助

尝试使用ReactPlayer组件加载本地视频文件，代码如下：

const url = '/localVideo.mp4';

<ReactPlayer url={url} width="100%"
             height="100%"
             controls={true} />

运行后出现错误提示：

MediaError {code: 4, message: 'MEDIA_ELEMENT_ERROR: Empty src attribute'}

该URL在原生<video>元素中可正常播放，但查看ReactPlayer源码发现它似乎要求必须使用MediaStream：

if (isMediaStream(url)) {
  try {
    this.player.srcObject = url
  } catch (e) {
    this.player.src = window.URL.createObjectURL(url)
  }

而MDN文档指出，目前已不再需要借助MediaStream，直接使用字符串URL即可：

In older versions of the Media Source specification, attaching a stream to a element required creating an object URL for the MediaStream. This is no longer necessary, and browsers are removing support for doing this.

请问如何不依赖MediaStream从本地文件URL加载视频？

方法1：正确导入本地视频文件 #

React项目中直接使用相对路径可能无法被打包工具解析，需先导入视频文件：

import localVideo from './localVideo.mp4';

<ReactPlayer url={localVideo} width="100%" height="100%" controls={true} />

这种方式会让webpack等打包工具处理视频资源，生成正确的访问路径。

方法2：将视频放入public目录使用绝对路径 #

若视频放在项目public目录下，直接使用根路径即可，ReactPlayer能正确识别：

const url = '/localVideo.mp4'; // 视频位置：public/localVideo.mp4

<ReactPlayer url={url} width="100%" height="100%" controls={true} />

此时无需导入，public目录下的资源会直接被复制到打包后的根目录。

方法3：强制指定视频类型 #

如果路径没问题仍报错，可以显式指定媒体类型，避免ReactPlayer误判URL类型：

const url = '/localVideo.mp4';

<ReactPlayer 
  url={url} 
  width="100%" 
  height="100%" 
  controls={true}
  type="video/mp4"
/>

指定type能帮助ReactPlayer明确这是视频文件，直接走原生视频加载逻辑。

补充说明 #

ReactPlayer仅对MediaStream类型的URL做特殊处理，普通字符串URL理应直接设置到video元素的src属性。出现空src错误大概率是路径解析问题，导致实际传递给video的src为空字符串，优先检查路径是否正确、打包工具是否正确处理了该资源。

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