如何将本地视频文件作为props传递给ReactPlayer组件

问题场景 #

使用ReactPlayer组件时，title、desc、sourceUrl等props都能正常渲染，但传入的videoUrl无法让视频正常加载。直接在组件中导入视频文件却能正常运行。

错误原因 #

问题出在文件1的Data数组定义中，你将videoUrl的值包裹在了对象{ videoSample }里，这会导致props.videoUrl最终是一个对象（结构为{ videoSample: 视频资源引用 }），而ReactPlayer的url属性需要的是直接的视频资源引用或路径字符串，无法识别对象类型的值。

解决方案 #

1. 修改文件1的Data结构

去掉videoUrl值外层的对象包裹，直接赋值为videoSample：

import videoSample from "../assets/videos/sample-video.mov";

export const Data = {
  ProjectList: [
    {
      title: "My title",
      desc: "Some description",
      videoUrl: videoSample, // 移除外层{}
      sourceUrl: "https:// ... ",
    },
  ],
};

2. 保持ProjectDetail组件不变

此时props.videoUrl会直接拿到正确的视频资源引用，ReactPlayer就能正常加载视频了：

export default function ProjectDetail(props) {
  return (
    <>
      <div>
        <ReactPlayer 
           url={props.videoUrl}  // 现在可正常工作
           width="500px"
        />
      </div>
      <div>
        <h2>{props.title}</h2>
        <p>{props.desc}</p>
        <button 
          onClick={() => { window.open(props.sourceUrl, "_blank"); }}
        > Click to see more
        </button>
      </div>
    </>
  );
}

补充说明 #

当你使用{ videoSample }的语法时，这是ES6的对象简写，等同于{ videoSample: videoSample }，传递给组件的是一个包含视频资源的对象，而非资源本身。直接传递videoSample则和你在组件中直接导入的效果一致，ReactPlayer可以正确识别这个资源引用。

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