英文:
ReactPlayer doesn't load videos initially
问题
我在我的React应用程序中使用ReactPlayer来显示存储在本地文件夹中的视频，但是我遇到了一个问题，即在加载页面或刷新页面时视频不会初始加载。我已经在下面包含了相关的代码片段：
return (
<div>
<ReactPlayer key={1} url={"videos/1.mp4"} controls={true} />
</div>
)
在加载或刷新页面时，播放器最初不显示任何内容，如下图所示：
然而，我注意到如果我使用导航栏导航到另一个页面，然后再切换回原始页面，视频会成功加载，如下面的截图所示：
我已经检查了与此问题相关的GitHub问题#1520，并尝试根据其中提到的建议升级了我的包。然而，问题仍然存在于我的网站上。
以下是我目前使用的软件包版本：
- "react": "^18.2.0"
- "react-dom": "^18.2.0"
- "react-player": "^2.12.0"
- "react-router-dom": "^6.11.2"
- "react-scripts": "^2.1.3"
- Node.js: 18.16.0
此外，我在以下浏览器上运行我的应用程序：Safari、Chrome和Edge。
英文:
I am using ReactPlayer in my React application to display videos, which are stored in a local folder. However, I'm facing an issue where the videos don't load initially when the page is loaded or refreshed. I have included the relevant code snippet below:
return (
<div>
<ReactPlayer key={1} url={"videos/1.mp4"} controls={true} />
</div>
)
Upon loading or refreshing the page, the player does not display anything initially, as shown in the following image:
However, I noticed that the video loads successfully if I navigate to another page using the navbar and then switch back to the original page. This can be seen in the screenshots below:
I have already checked GitHub issue #1520 related to this problem and attempted to upgrade my package based on the suggestions mentioned there. However, the issue still persists on my website.
Here are the versions of the packages I'm currently using:
"react": "^18.2.0"
"react-dom": "^18.2.0"
"react-player": "^2.12.0"
"react-router-dom": "^6.11.2"
"react-scripts": "^2.1.3"
Node.js:18.16.0
Additionally, I am running my application on the following browsers: Safari, Chrome, and Edge.
答案1
得分: 0
代码中提供的问题是，ReactPlayer组件的URL属性设置为相对路径（videos/1.mp4）。为了成功加载视频，我需要提供完整的URL或有效的绝对路径。
视频存储在我的React应用程序的public文件夹中，因此我可以将代码修改如下：
<ReactPlayer
key={1}
url={`${process.env.PUBLIC_URL}/videos/1.mp4`}
controls={true}
/>
通过使用process.env.PUBLIC_URL，我可以确保构建正确的绝对路径，考虑到我的React应用程序的公共URL。然而，我仍然不知道为什么在旧代码中从另一个页面切换时可以加载视频，但在新代码中可以正常工作。
英文:
The issue with the code I provided is that the URL prop of the ReactPlayer component is set to a relative path (videos/1.mp4). To load videos successfully, I need to provide the full URL or a valid absolute path.
The videos are stored in the public folder of my React application, so I can modify the code as follows:
<ReactPlayer
key={1}
url={`${process.env.PUBLIC_URL}/videos/1.mp4`}
controls={true}
/>
By using process.env.PUBLIC_URL, I can ensure that the correct absolute path is constructed, taking into account the public URL of my React application. However, I still don't know why the videos could be loaded when switching from another page in the old code, but they work in the new code.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论