I want to show a skeleton/placeholder before full video content is loaded, but I don't know how to catch that event. Currently, first some default player is displayed and then the real video shows (with different dimensions).
This is my component.
const Video = ({ src, type }) => {
const videoRef = useRef();
return (
<video
ref={videoRef}
autoPlay
loop
controls>
<source src={src} type={type} />
</video>
);
};
export default Video;
//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>
)