如何在视频加载时显示骨架？

Question

我想在加载完整视频内容之前显示骨架/占位符，但我不知道如何捕捉该事件。目前，首先显示一些默认播放器，然后显示真实视频（具有不同的尺寸）。

这是我的组件。

const Video = ({ src, type }) => {
  const videoRef = useRef();
  return (
    <video
      ref={videoRef}
      autoPlay
      loop
      controls>
      <source src={src} type={type} />
    </video>
  );
};

export default Video;

Answer 1

//You will need a skeleton component that has a similar //structure to the component you're trying to load. The //implementation goes as follow.

//1. Import your skeleton component inside your video component

import VideoSkeleton from 'Video Skeleton module';

//2. add a fetch listener prop to your video component

const Video = ({ src, type, isLoading }) => {
               // the rest of your code.
               };

               export default Video;
//3. based on the isLoading prop show the skeleton componet or the video component using the following logic
               
                const Video = ({ src, type, isLoading }) => {
                   const videoRef = useRef();
                   return (
                      <div>
                      
                        {
                          isLoading && <VideoSkeleton/>
                          !isLaoding && 
                          <video
                             ref={videoRef}
                             autoPlay = { loop }
                             controls = { controlles value }
                             source = {src} 
                             type = {type}
                          </video>
                        
                        }
                      
                      </div>
                   )