react-player icon indicating copy to clipboard operation
react-player copied to clipboard

Safari progress onProgress non-linear glitch at beginning of clip in autoplay

Open jwalker-om opened this issue 2 years ago • 1 comments

Current Behavior

When autoplaying on Safari (initializing playing as true), the video glitches a bit at the beginning and the played progress will sometimes go backwards a split second before progressing again. I do not experience this in Chrome.

Tried on both my Mac and iPad. Sometimes there is no issue. My guess is that it's something related to the way Safari loads/buffers the video? I've been able to trigger it from a pause state (initializing playing as false, but it is far less likely)

Expected Behavior

played progress is always linear and increasing

Steps to Reproduce

Likely reproducible in Safari only

  1. See Codesandbox: https://codesandbox.io/s/react-player-safari-autoplay-glitch-2dknbt
  2. Observe progress bar - it may jump around a bit at beginning
  3. Observe console output - it's set to output the played progress in the onProgress callback. You may see that the numbers do not consistently increase, but rather jump back to a lower number before progressing again.

Environment

  • URL attempting to play: https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4
  • Browser: Safari 16.3 on macOS, Safari on iPadOS
  • Operating system: macOS 11.6,, iPadOS 15.4
  • Codesandbox
  • react-player 2.12.0

jwalker-om avatar May 04 '23 23:05 jwalker-om

We are seeing this in chrome also when we try and immediately request to play the video after onReady has fired for the first time.

Loque- avatar Jul 25 '23 13:07 Loque-