onProgress stops getting called if playing is set to false

[sniepoort]

I want to start playing the video (a local .mp4) when the loading state reaches a certain level, let's say 0.5.
However, when the playing parameter is set to false, onProgress only get's called initially, and then stops getting called. Am I misunderstanding the concept of onProgress? Shouldn't the video continue being loaded, even if the media isn't playing? I can see in the demo that when the video is paused, loading doesn't take place. Is there any way to achieve what I want then, or is it a browser specific thing?

[cookpete]

It's true that onProgress stops being called when playing is false. However, it's also true that onProgress is not called when the played or loaded amounts do not change. It is up to the browser how much of a file they load as they play, and even though preload is set to auto in the HTML element, modern browsers are very good at only downloading what they need to play.

If you are attempting to wait until the browser can play the entire media, there is a canplaythrough event that we could perhaps add a prop for, but I'm not sure how consistently this event is fired across different browsers.

[sniepoort]

Thanks, that's more or less what I figured was going on.
I'm not sure about canplaythrough. A quick search says that it should be a more or less reliable event across browsers, although when they fire it seems to be a bit inconsistent. It's up to you if that's a prop you'd like to add. I know i'd like to try it!

[jmp909]

Hi @cookpete

would you be able to make that canplaythrough optional somehow? (ie we can choose to listen for it or not.... in fact all of those events really).

That event was absolutely critical for a (non-react) video I did for a banner, in order to load enough for the video to (attempt to) play through without buffering. Tested on throttled connection in chrome and it worked great. So having access to it would be very useful.

regards
J

[cookpete]

@jmp909 This is actually already possible by passing attributes into the fileConfig prop, like so:

<ReactPlayer
  url={file.mp3}
  playing
  fileConfig={{
    attributes: {
      onCanPlayThrough: () => console.log('Now I can play it through')
    }
  }}
/>

In fact, any other media event is supported in this way, with the on prefix and camelcased to keep React happy.

[belohlavek]

@cookpete Is there any way to track how much the video has loaded while it is paused?
onBuffer gets triggered, but I can't find a way to get the exact buffer value while not progressing!

[cookpete]

@belohlavek The onProgress event doesn't fire whilst paused due to this commit which was an attempt to fix this issue. There is probably a better solution that allows loaded amounts to still be reported whilst paused, so I'll look into it.

It may even be worth splitting onProgress into onPlayedProgress and onLoadedProgress or something to keep things cleaner. Maybe something for v1.0.

[priyathamkat]

@cookpete onProgress is not being called every progressFrequency milliseconds in my app, it's only being called once after what seems to progressFrequency milliseconds. Are you sure that this shouldn't be
_this.progressTimeout = setInterval(_this.progress, _this.props.progressFrequency);
instead of
_this.progressTimeout = setTimeout(_this.progress, _this.props.progressFrequency);?

[cookpete]

Hey @priyathamkat yeah there seems to be a bug in the most recent version which I will look into. Good spot.

It doesn't need to be setInterval because setTimeout is being repeatedly set every time this.progress is called, which is a better technique for various reasons.