尝试加载视频文件以做出反应时出现黑屏？

Question

我正在尝试使用react-player将本地视频加载到react中以播放该视频。我有基本的代码设置，但我不确定为什么视频不能播放。

我看到了一些关于视频需要放在公共文件夹中的传言，但这真的有必要吗？下面是codesandbox，下面是实际代码：

import React, { useState } from "react";
import ReactPlayer from "react-player";
import classes from "./app.module.css";

function App() {
  const [videoFilePath, setVideoFileURL] = useState(null);

  return (
    <div>
      <div>
        <button onClick={() => setVideoFileURL("./assets/beyondTheSea.mp4")}>
          Play
        </button>
      </div>

      {/**VIDEO 1 */}
      <div>
        {videoFilePath ? (
          <ReactPlayer
            url={videoFilePath}
            width="50%"
            height="50%"
            controls={true}
          />
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
}

export default App;

Answer 1

看起来视频确实需要放在public文件夹中，因为

setVideoFileURL("beyondTheSea.mp4")

当beyondTheSea.mp4是您的public文件夹中的一个文件时，可以正常工作。

Sandbox Example