I have an odd issue with seekTo on chromium based browsers, yet the following issue i'm about to describe does't occur in Firefox.
I have a React Player with a custom controls I've created for it. On a chromium based browser, the total length (duration) of a video I'm attempting to play is not occurring until the point in which about 2/3 of the video's length is being played.
This basically causes issues when I try to use the seekbar before the length of the video appears (for example - a case could be when I start playing for the first time since a refresh of the page occurs, and immediately try to use the seekbar to navigate to different time of the video), I get the following error:
TypeError
Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
Call Stack
FilePlayer.seekTo
vendors-node_modules_react-player_lib_ReactPlayer_js.794720cee9b8aef3d1f7.bundle.js:1925:31
Player.seekTo
vendors-node_modules_react-player_lib_ReactPlayer_js.794720cee9b8aef3d1f7.bundle.js:454:21
ReactPlayer.seekTo
vendors-node_modules_react-player_lib_ReactPlayer_js.794720cee9b8aef3d1f7.bundle.js:896:20
handleSeekMouseUp
src_components_journey_jo_record_button_js-src_ducks_webcam_duck_js-src_features_Video_comp-26f843.1d9cf3b4015a2f90745f.hot-update.js:155:23
undefined
vendors-node_modules_material-ui_core_esm_Slider_Slider_js.fdb87116ed1617f64f54.bundle.js:755:7
HTMLDocument.
vendors-node_modules_material-ui_core_esm_Grow_Grow_js-node_modules_material-ui_core_esm_Icon-7016f7.580dd654a36d43a9f37c.bundle.js:2029:29
This is the function which's drilled to Controls component, which's my custom control component.
const handleSeekMouseUp = (e, newValue) => {
// if (!isFinite(playerRef?.current?.getDuration())) {
// setFeedback(feedbackConfig);
// } else {
setState({ ...state, seeking: false });
playerRef.current.seekTo(newValue / 100, "fraction");
// }
};
The commented part is a bandage in order to not get the error above. The value of 'duration' is infinite in Chromium based browsers.
And again, on Firefox it works just fine.
any ideas?