Closed ShahriarDhruvo closed 1 year ago
I have experienced this same issue. I believe this issue is caused by React StrictMode, you can disable this and the videos should play without any issue.
Is this because react 18's next dom + next dom or whatever weird issue? Anyway turning off strict mode is not the way. It's like the frontend can't read weather the app is currently authenticated so the solution is to remove httponly from auth_token!! What I am saying is there has to be better solution as far as I remember it worked just fine before I updated this package along with react 😭
True, the real issue needs to be fixed but it works and your prod will be okay until its fixed 😃
Yes and thanks for the strict mode reference, I forgot to check by turning off that and it worked 😀
Hopefully fixed by https://github.com/cookpete/react-player/pull/1538
@cookpete, i think the issue still persist in next13 with strict-mode
enabled
@knowsarzehmeh I haven’t published a new version yet. Will do soon.
I confirm that updating from 2.11.0 to 2.12.0 seems fixing this issue. Thanks
[EDIT] @cookpete
const url = 'https://p.scdn.co/mp3-preview/0ed0e3241d7dd381271156710b7153308ddfbb89';
<ReactPlayer url={url} ... /> // works
// but
ReactPlayer.canPlay(url); // false
The issue still persists for a youtube link. It plays after clicking on a navlink, but doesn't on the very first load or when reloading. Using:
"react": "18.2.0",
"react-player": "2.13.0",
Also:
Please let me know if you want me to create a minimal example?
Similar questions: https://stackoverflow.com/questions/61271284/audio-dont-play-again-on-page-refresh-react https://stackoverflow.com/questions/76425979/reactplayer-doesnt-load-videos-initially https://stackoverflow.com/questions/69425243/react-player-how-to-handle-play-pause-state-with-autoplay
I had this issue today and I solved it by converting my .mov
video to .mp4
format. It seems some browsers don't like .mov
video files.
Learn more: Web video codec guide
I'm having the same problem while trying to stream .m3u8 file. Sometimes it works, sometimes only show a white control bar, with no video (The only diference between both cases, is that when it works, I can see data image svg requests).
Looks very random to me, never know if the stream will load after refreshing the page. The stream URL is always the same for both cases.
Really need help with this issue. Already tried removing strict mode, both downgrande and upgrade hls version, and still have this unpredictable bug.
EDIT: Debugging streams can be tricky as sometimes runs smoothly on VLC player, and not in react-player only but browsers in general seem to have a strange behavior. Read my answer to @Spanishiwa below for more information.
I'm also trying to stream .m3u8 files and I'm experiencing something very similar to danielfs13. With the same stream URL (absolute path player.vimeo m3u8 link), the video will sometimes load in Safari, but sometimes won't load in Chrome. Then, with no code changes the player will load correctly in both browsers, seemingly randomly.
The ReactPlayer key in React Component Dev Tools is always "File" (sounds right). I updated to the latest react-player version, but removing strict mode is not an option for me.
I'm also trying to stream .m3u8 files and I'm experiencing something very similar to danielfs13. With the same stream URL (absolute path player.vimeo m3u8 link), the video will sometimes load in Safari, but sometimes won't load in Chrome. Then, with no code changes the player will load correctly in both browsers, seemingly randomly.
The ReactPlayer key in React Component Dev Tools is always "File" (sounds right). I updated to the latest react-player version, but removing strict mode is not an option for me.
I can confirm this is not related to react-player only.
After more testing, I realized that the streams had problems on other players. I also tested directly in Chrome with an extension to run m3u8 streams, and the problem persisted. It turns out that the problem was in the ngnix server settings for video conversion through FFPMEG. After my team fixed these problems, streams run much better.
However, there was no success for channels generated by Amazon IVS, the same random behavior persisted with black screens after many attempts. It would be interesting if someone has a solution for this.
I apologize and will edit my other post, I was confused because the streams somehow run fine in VLC, but apparently it is more related to a problem with browsers in general, and not just react-player.
I am also facing this issue, I tried Mozilla Firefox it works. But in Chrome, it does not. Can anybody help me with this issue?
I am also facing this issue, I tried Mozilla Firefox it works. But in Chrome, it does not. Can anybody help me with this issue?
You must set muted={true}
https://github.com/cookpete/react-player?tab=readme-ov-file#autoplay
Current Behavior
Basically I am trying to load the video from my public folder (also tried a s3 link):
But the react player is not loading the video initially: see the photo
As you can see from the code and the screenshot I am using both ReactPlayer and vanilla "video" tag to show you that it is not a path issue. However if I change the path manually from the code --> "/tmp/video/lol.mp4" to "tmp/video/lol.mp4" (or anything as long as it is a valid path, I can use both "/tmp/video/lol.mp4" and "tmp/video/lol.mp4" as they both points to the same local video in the public folder) it causes react to update the dom and then both of them show the video just fine. But if refresh/hard-refresh the page the issue persist and it again goes away if react update the dom for some code change. But this is not the case for youtube video links they works just fine either way.
I can also reproduce this in codesandbox!! CodeSandbox link is in below. Is there something wrong with my computer??
Steps to Reproduce
My main project is on nextjs however I have created both brand new nextjs and react project by "yarn create next-app --typescript" and "yarn create react-app my-app --template typescript" respectively. But this problem persist eitherway :(
My pacage versions:
"next": "12.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-player": "^2.11.0", "react-scripts": "5.0.1", "typescript": "^4.4.2",
Environment