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
9.34k stars 1.15k forks source link

onProgress not working for webm files #503

Closed ankithkonda closed 5 years ago

ankithkonda commented 6 years ago

Hi onProgress is only called once when a webm file is being played. onProgress works as expected with mp3 files

The webm file i'm using is audio only.

cookpete commented 5 years ago

@ankithkonda Do you have an example file where this happens? I can't find one anywhere to debug the problem.

grydstedt commented 5 years ago

I've been trying to play this long Amazon Polly file and onProgress is only ever called once. Here is a longer lorem ipsum file from Polly:

https://polly.us-east-1.amazonaws.com/v1/speech?OutputFormat=mp3&Text=Contrary%20to%20popular%20belief%2C%20Lorem%20Ipsum%20is%20not%20simply%20random%20text.%20It%20has%20roots%20in%20a%20piece%20of%20classical%20Latin%20literature%20from%2045%20BC%2C%20making%20it%20over%202000%20years%20old.%20Richard%20McClintock%2C%20a%20Latin%20professor%20at%20Hampden-Sydney%20College%20in%20Virginia%2C%20looked%20up%20one%20of%20the%20more%20obscure%20Latin%20words%2C%20consectetur%2C%20from%20a%20Lorem%20Ipsum%20passage%2C%20and%20going%20through%20the%20cites%20of%20the%20word%20in%20classical%20literature%2C%20discovered%20the%20undoubtable%20source.%20Lorem%20Ipsum%20comes%20from%20sections%201.10.32%20and%201.10.33%20of%20%22de%20Finibus%20Bonorum%20et%20Malorum%22%20%28The%20Extremes%20of%20Good%20and%20Evil%29%20by%20Cicero%2C%20written%20in%2045%20BC.%20This%20book%20is%20a%20treatise%20on%20the%20theory%20of%20ethics%2C%20very%20popular%20during%20the%20Renaissance.%20The%20first%20line%20of%20Lorem%20Ipsum%2C%20%22Lorem%20ipsum%20dolor%20sit%20amet..%22%2C%20comes%20from%20a%20line%20in%20section%201.10.32.&TextType=text&VoiceId=Kendra&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAI2A3V5SI7DVXU2TQ%2F20181120%2Fus-east-1%2Fpolly%2Faws4_request&X-Amz-Date=20181120T104524Z&X-Amz-Expires=3600&X-Amz-Signature=c425aee6c806fcc9ca3e3c8b649444dcded1a54b8956ec7a851d13278014f68e&X-Amz-SignedHeaders=host

cookpete commented 5 years ago

@grydstedt I'm getting a 403 error for that URL :(

ammar17 commented 5 years ago

I also have the same problem with webm videos (generated with the MediaDevices.getUserMedia lib). indeed, when I start playing the video, the onProgress function does not fire at each progressInterval @CookPete @grydstedt, have you found a solution to this problem? thanks

cookpete commented 5 years ago

onProgress requires a duration in order to return the percentages for played and loaded:

https://github.com/CookPete/react-player/blob/37700cc6a8c7a1d6c2d1796862ff4aafb45739f9/src/Player.js#L102-L107

My guess is that these files are not returning a valid duration for some reason.

ankithkonda commented 5 years ago

@CookPete sorry this completely fell off my radar. Do you have an example file where this happens? I can't find one anywhere to debug the problem. happy to send through an example in a few days

cookpete commented 5 years ago

@ankithkonda I still can't reproduce this myself, but a falsey duration is the only reasonable explanation for onProgress not firing correctly for certain files.

janakhad commented 5 years ago

@CookPete In the case when duration is equal to Infinity (this is the case for streams), this check: https://github.com/CookPete/react-player/blob/37700cc6a8c7a1d6c2d1796862ff4aafb45739f9/src/Player.js#L113 will always be if (0 !== 0 || 0 !== 0) since there will be 0 when dividing any number by infinity. I suggest checking here playedSeconds and loadedSeconds instead of played and loaded.

KasJones commented 5 years ago

Hi @CookPete! I was wondering if you have a fix for this, I've noticed you closed the issue

cookpete commented 5 years ago

Hi @KasFijolek, this should hopefully be fixed in v1.11.1 after I took @janakhad's suggestion and updated the logic to compare playedSeconds and loadedSeconds instead of played and loaded fractions, which would always be zero for streams with Infinity duration.

KasJones commented 5 years ago

awesome, thanks for the swift response! 🙂

ragnarok22 commented 1 year ago

I'm getting the same problem with webp files. I printed the value of onDuration and still getting Infinity value. The weird thing is, when you do it manually on browser console you get the correct values

image