search

cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
8.98k stars 1.12k forks source link

React player is not loading the video initially #1520

Closed ShahriarDhruvo closed 1 year ago

ShahriarDhruvo commented 1 year ago

Current Behavior

Basically I am trying to load the video from my public folder (also tried a s3 link):

<div>
      <ReactPlayer controls url={video_url} />
      <video width="320" height="240" controls>
          <source src={video_url} type="video/mp4" />
          Your browser does not support the video tag.
      </video>
  </div>

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

tomheaton commented 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.

ShahriarDhruvo commented 1 year ago

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 😭

tomheaton commented 1 year ago

True, the real issue needs to be fixed but it works and your prod will be okay until its fixed 😃

ShahriarDhruvo commented 1 year ago

Yes and thanks for the strict mode reference, I forgot to check by turning off that and it worked 😀

cookpete commented 1 year ago

Hopefully fixed by https://github.com/cookpete/react-player/pull/1538

knowsarzehmeh commented 1 year ago

@cookpete, i think the issue still persist in next13 with strict-mode enabled

cookpete commented 1 year ago

@knowsarzehmeh I haven’t published a new version yet. Will do soon.

vincentwinkel commented 1 year ago

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
stephanebruckert commented 9 months ago

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

flacial commented 6 months ago

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

danielfs13 commented 5 months ago

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.

Spanishiwa commented 4 months ago

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.

danielfs13 commented 3 months ago

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.

AnandJGITHUB commented 2 months ago

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?

lerryklitzke commented 2 weeks ago

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