Show description only when video is loaded (HTML <video> Tag)

On the site (written ReactJS), the user has the opportunity to stream video from his screen. For this I use HTML Tag. I put a small description on top of the video (blurring the background a little so that users can see both the description and the video).

The problem is that when the page loads, the video takes some time to load (from three to five seconds), but the text with the description appears immediately. It doesn't look very nice.

export function ShowVideo() {
   const videoRef = useRef<HTMLVideoElement>(null);
   return (
    <div>
      {videoSourceId && (
          <div className="overflow-hidden">
            <div>
              <DiscriptionForVideo />
              <video ref={videoRef} muted />
            </div>
          </div>
      )}
    </div>
  );
}

Please tell me how to make sure that the text with the description appears at the moment when the video appears.

Solution

To synchronize the appearance of the description text with the video, you can use the onLoadedData event of the video element. This event is triggered when the video's metadata has been loaded, and it's a good indicator that the video is about to start playing. Here's an updated version of your ShowVideo component:

import React, { useRef, useState } from 'react';
export function ShowVideo() {
const videoRef = useRef<HTMLVideoElement>(null);
const [isVideoLoaded, setIsVideoLoaded] = useState(false);
const handleVideoLoaded = () => {
setIsVideoLoaded(true);
 };
return (
<div>
{videoSourceId && (
<div className="overflow-hidden">
<div>
<DiscriptionForVideo />
<video
          ref={videoRef}
          muted
          onLoadedData={handleVideoLoaded}
          style={{ visibility: isVideoLoaded ? 'visible' : 'hidden' }}
        />
</div>
</div>
)}
</div>
);
}

In this code, the onLoadedData event triggers the handleVideoLoaded function, which sets the isVideoLoaded state to true. The visibility of the video element is then controlled based on this state, ensuring that the description text and video appear together. Adjust the styling as needed for your specific layout.