0

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?

dani_l_n
  • 376
  • 1
  • 11
  • Similar- https://stackoverflow.com/questions/21522036/html-audio-tag-duration-always-infinity - content-length header set? – James Apr 13 '23 at 16:43

0 Answers0