Switch between two videos stacked upon one another without restarting the video in reactJS

Question

I am trying to create a video switch which shows the difference between two videos (Original and Processed Video). Currently I have two video players (VideoJS and Shaka Player) to play the original and processed videos respectively. I want to switch between both the video players when they play simultaneously. This should be seamless without any buffering. It should hide the overlay player, but not stop it from playing. Is there a way to achieve this? This is my current code :

<div className="playerView">
   <div className="inputPreview">
      { checked && <VideoJS options={videoJsOptions}/> }
   </div>
   <div className="outputPreview">
      { enableOutputPreview && !checked && <ShakaPlayer autoPlay src={shakaSource} /> }
   </div>
</div>

Answer 1

You can toggle opacity depending on the checked variable value.

import {useState} from "react";

const [checked, setChecked] = useState(true);
const [outputPreview, setOutputPreview] = useState(false);

<div className="playerView">
   <div style={{opacity: checked ? 1 : 0}} className="inputPreview">
      <VideoJS options={videoJsOptions}/> 
   </div>
   <div className="outputPreview" style={{opacity: !checked ? (enableOutputPreview ? 1 : 0) : 0}}>
      <ShakaPlayer autoPlay src={shakaSource} /> 
   </div>
</div>