ReactJS: How to switch video tags just when one is ready to play to not show the loading black screen?

Question

Background

I have a video player, an instance of VideoJS. The player receives videoData via a socket event video_data from the server. Then it changes the video source to the one that is received.

The server is running on-premise, all video files, database is hosted on-premise. So there is close to 0 network latency.

The problem

A black screen appears while the browser loads the video data. I would like to tune it further and not show the black screen at all.

My solution

Here is my approach: I want to create two video instances ( tags) and switch between them. The first one is hidden and the second one is visible. When it receives video data, rather than changing the source of the current visible tag, it changes the source of the hidden tag. Just when hidden tag is ready to play (onCanPlay event), it switches the visibility of the two tags. Ideally that's how the black screen will not be visible at all.

Sample source code

// ---------- Index.tsx ----------
import { useEffect, useRef, useState } from "react";
import videojs, { VideoJsPlayerOptions } from "video.js";
import "video.js/dist/video-js.css";
import { VideoDataWithOptions } from "../../@types/types";
import { socket } from "../../lib/socket";
import VideoPlayer from "./VideoPlayer";

const hlsVideoJsOptions: VideoJsPlayerOptions = {
  autoplay: true,
  muted: false,
  controls: true,
  loop: false,
  sources: [
    {
      src: "",
      type: "application/x-mpegURL",
    },
  ],
};

const Index = () => {
  const [videoData, setVideoData] = useState({} as VideoDataWithOptions);

  useEffect((): any => {
    socket.on("videoData", data => {
      const options = {
        ...hlsVideoJsOptions,
        sources: [
          {
            src: `/videos/destination/${data.path}`,
            type: "application/x-mpegURL",
          },
        ],
      };
      setVideoData({ ...data, options });
    });

    return () => socket.off("videoData");
  }, []);

  return ;
};

export default Index;






// ---------- VideoPlayer.tsx ----------
type Props = { videoData: VideoDataWithOptions }; // ex. => { path: string, title: string, loop: boolean, options: VideoJsPlayerOptions, ... }

const VideoPlayer = ({ videoData }: Props) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null); // null

  useEffect(() => {
    // Make sure Video.js player is only initialized once
    if (!playerRef.current) {
      const videoElement = videoRef.current;

      if (!videoElement) return;

      playerRef.current = videojs(videoElement, videoData.options, () => {});
    } else {
    }
  }, [videoData, videoRef]);

  return (
    
      
  );
};

export default VideoPlayer;


// How should I go about this?

Dev environment

user_3617380 · Answer

If I understand you right, your videoData is gonna change repeatedly, so you need to switch between the two elements and there's always only one of them visible.

Now think about it, videoData is the only variable, and there's very little view reactivity attach to it. My solution is based on this fact, it's very "un-react", very opinionated. In fact I'mma only use react to load and unload two elements, and the rest is all taken cared by imperative code.

type RefHolder = {
  current: HTMLVideoElement | null;
  player: any | null;
};

type VideoPlayerInternalState = { 
  flag: number;
  video_1: RefHolder;
  video_2: RefHolder;  
};

const VideoPlayer = ({ videoData }: Props) => {
  const state = useRef({
    flag: 0,
    video_1: { current: null, player: null },
    video_2: { current: null, player: null },
  }).current;

  useEffect(() => {
    // use a odd/even flag to switch between 2 `