ReactPlayer 最初不加载视频

Question

我在 React 应用程序中使用 ReactPlayer 来显示视频，这些视频存储在本地文件夹中。但是，我面临的问题是，当加载或刷新页面时，视频最初不会加载。我在下面包含了相关的代码片段：

return (
  <div>
    <ReactPlayer key={1} url={"videos/1.mp4"} controls={true} />
  </div>
)

加载或刷新页面时，播放器最初不显示任何内容，如下图所示：

但是，我注意到如果我使用导航栏导航到另一个页面然后切换回原始页面，视频会成功加载。这可以在下面的屏幕截图中看到：

我已经检查了与此问题相关的 GitHub 问题 #1520，并尝试根据其中提到的建议升级我的包。然而，这个问题仍然存在于我的网站上。

以下是我当前使用的软件包的版本：
“反应”：“^18.2.0”
“react-dom”：“^18.2.0”
“反应玩家”：“^2.12.0”
“反应路由器-dom”：“^6.11.2”
“反应脚本”：“^2.1.3”
Node.js：18.16.0

此外，我在以下浏览器上运行我的应用程序：Safari、Chrome 和 Edge。

Answer 1

我提供的代码的问题是 ReactPlayer 组件的 URL 属性设置为相对路径 (videos/1.mp4)。要成功加载视频，我需要提供完整的 URL 或有效的绝对路径。

视频存储在我的React应用程序的公共文件夹中，因此我可以修改代码如下：

<ReactPlayer
  key={1}
  url={`${process.env.PUBLIC_URL}/videos/1.mp4`}
  controls={true}
/>

通过使用 process.env.PUBLIC_URL，我可以确保构建正确的绝对路径，同时考虑到我的 React 应用程序的公共 URL。但是，我仍然不知道为什么在旧代码中从另一个页面切换时可以加载视频，但在新代码中却可以工作。

Answer 2

我通过 set ReactPlayer muted={true} 修复了它