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

Question

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

我已经看到一些关于需要在公共文件夹中的视频的喋喋不休，但这真的有必要吗？这是代码框，下面是实际代码：

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文件夹中的文件。

沙盒示例