react-player: [v2.10.1] `onProgress` callback is not firing when the video is playing

Be sure to search for your issue before opening a new one.

Current Behavior

onProgress callback is not called when the video is playing.

Expected Behavior

onProgress callback should be called periodically with the playback information when the video is playing.

Steps to Reproduce

Use version v2.10.1 of react-player (issue does not exist in v2.10.0

Add a simple player as follows that plays a webm file

<ReactPlayer
  ref={playerRef}
  width={1024}
  height={768}
  muted
  playing={true}
  url="https://example.com/video.webm"
  onDuration={onDuration}
  onProgress={onProgress}
/>

The onProgress callback is never called

Environment

URL attempting to play: Any url containing a video file (I used a webm file)
Browser: Chrome
Operating system: MacOS

Other Information

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 8
Comments: 22 (4 by maintainers)

Commits related to this issue

🐛 fix: on progress callback is not firing Issue: https://github.com/cookpete/react-player/issues/1453 Solution: https://github.com/cookpete/react-player/issues/1453#issuecomment-1126687518 — committed to maurodesouza/watching by maurodesouza 2 years ago

Most upvoted comments

I can also confirm the issue with "react-player": "2.10.1" and React 18 using react-scripts.

I managed to temporarily fix it by removing React.StrictMode.

Minimal reproduction: https://codesandbox.io/s/naughty-wildflower-pqvest

Expected behavior: it should log the onProgress events

Actual behavior: it does not log the onProgress events

Temporary fix: remove <StrictMode> and now it does log the onProgress events.

Looking forward to the proper fix 🙂

+18

TomerRon on May 14, 2022

Version 2.10.1 was released ~90 days ago (3 months ago according to the npm repo) and the PR for this issue was merged 21 days ago. Version 2.10.1 is also the latest release. Therefore, the fix for this issue has not been released yet.

When can we expect a release on the next version of react player

+14

mohamedanushkar on Aug 10, 2022

I’ve taken a moment to look into this and I think replacing (src/Player.js):

  handlePlayerMount = player => {
    if (this.player) return // Prevent loading twice in strict mode
    this.player = player
    this.player.load(this.props.url)
    this.progress()
  }

with

  handlePlayerMount = player => {
    if (this.player) { // Prevent loading twice in strict mode
      this.progress()
      return
    }
    this.player = player
    this.player.load(this.props.url)
    this.progress()
  }

should fix the issue.

I’ve created a PR with this fix. Please let me know if there are any issues with the proposed fix.

Thanks!

Taar on Jun 3, 2022

I have the same issue.

limjunsung on May 12, 2022

Fixed in 2.11.0. Sorry for the delay.

cookpete on Sep 16, 2022

@kgilliam125 turns out when I deploy the change to an environment, onProgress gets triggered:
{playedSeconds: 2.009596, played: 0, loadedSeconds: 4.44, loaded: 0}
@manishsharma004 was alluding to this earlier, so the suggestion here is to disable strict mode (thanks @manishsharma004 !)

I created this a couple days a go to help illustrate the issue. Hopefully this helps.

Taar on Jul 14, 2022

@kgilliam125 turns out when I deploy the change to an environment, onProgress gets triggered:

{playedSeconds: 2.009596, played: 0, loadedSeconds: 4.44, loaded: 0}

@manishsharma004 was alluding to this earlier, so the suggestion here is to disable strict mode (thanks @manishsharma004 !)

paulklen on Jul 13, 2022