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

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

1 个答案: