Estoy tratando de crear una ventana emergente que reproducirá un video y cuando haga clic durante la reproducción, se detendrá y ocultará la ventana emergente.

Esto es cuando el usuario hace clic para mostrar y reproducir el video.

 <div className="mn sr" onClick={() => vidControl("PLAY")}> Showreel </div>

Hará visible este div y reproducirá el video.

 import Video from "../assets/videos/showreel/showreel.mov"; <div className="showreel" style={videoOpen ? { display: "block" } : { display: "none" }}> <ReactPlayer url={Video} className="sr-video" onClick={() => vidControl("PAUSE")} /> </div>

Esta función actúa como el control de video o el llamado

 const vidControl = (params) => { const video = document .querySelector(".showreel") .getElementsByTagName("video")[0]; if (params === "PLAY") { video.play(); setVideoOpen(true); } else { video.pause(); setVideoOpen(false); } };

No tengo ningún problema cuando lo ejecuto localmente, pero cuando lo despliego y hago clic para reproducirlo, aparece un error.

 Uncaught (in promise) DOMException: The element has no supported sources.

Busqué el mismo error e intenté solucionarlo con este código, ya que dicen que tengo que manejar la promesa, pero al final, no soluciona mi problema.

 async function videoPromise() { const video = document .querySelector(".showreel") .getElementsByTagName("video")[0]; try { await video.play(); setVideoOpen(true); console.log("play"); } catch (err) { video.pause(); setVideoOpen(false); console.log(err, "error"); } }

¿Hay algún problema con el código o la lógica aquí? Agradezco cualquier tipo de respuestas, gracias de antemano.