I am using Video.js to wrap Google Cloud Storage video public URLs, so that I can both skin it and control what second the video plays at (for example, play at 12 seconds)

I have the following in my page.tsx React app

  useEffect(() => {
    results.forEach((result, index) => {
      if (result.metadata.file_type === 'video') {
        const videoElement = document.getElementById(`video-${index}`);
        if (videoElement) {
          const player = videojs(videoElement);
          player.ready(() => {
            player.src({ type: 'video/mp4', src: result.metadata.gcs_public_url });
            player.currentTime(result.metadata.start_offset_sec); // Set the timestamp to start_offset_sec
          });
        }
      }
    });
  }, [results]);

And this is my HTML (it loops through result and displays all the videos. result.metadata.gcs_public_url is a URL that looks like: https://storage.googleapis.com/project/folder/video.mp4

                {results.map((result, index) => {

                        <video
                          id={`video-${index}`}
                          className="video-js vjs-default w-full h-auto mt-2"
                          controls
                          muted
                          preload="auto"
                        >
                          <source src={result.metadata.gcs_public_url} type="video/mp4" />
                          Your browser does not support the video tag.
                        </video>
                })}

For some reason, after setting the currentTime (link to docs), the video won’t show, even though the controls show.

          const player = videojs(videoElement); # this line causes issue
          player.ready(() => {
            player.src({ type: 'video/mp4', src: result.metadata.gcs_public_url });
            player.currentTime(result.metadata.start_offset_sec); // Set the timestamp to start_offset_sec
          });

From commenting out the lines, I can confirm it’s the const player = .. line that causes the issue.