Estoy tratando de configurar video.js en un proyecto next.js pero no funciona.

Al comienzo de la carga, el reproductor aparece en negro y desaparece repentinamente. En la consola hay una advertencia que dice lo siguiente:

"video.es.js?31bb:228 VIDEOJS: WARN: El elemento suministrado no está incluido en el DOM"

El código del componente del reproductor es el siguiente:

 import React from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export const ThorPlayer = (props) => { const videoRef = React.useRef(null); const playerRef = React.useRef(null); const {options, onReady} = props; React.useEffect(() => { // Make sure Video.js player is only initialized once if (!playerRef.current) { const videoElement = videoRef.current; if (!videoElement) return; const player = playerRef.current = videojs(videoElement, options, () => { player.log('player is ready'); onReady && onReady(player); }); // You can update player in the `else` block here, for example: } else { player.autoplay(options.autoplay); player.src(options.sources); } }, [options, videoRef]); // Dispose the Video.js player when the functional component unmounts React.useEffect(() => { const player = playerRef.current; return () => { if (player) { player.dispose(); playerRef.current = null; } }; }, [playerRef]); return ( <div data-vjs-player> <video ref={videoRef} className='video-js vjs-big-play-centered' style={{ width: "800px", height:"400px" }}/> </div> ); } export default ThorPlayer;

Y la página que implementa el componente es esta:

 import React from 'react' import ThorPlayer from '../../components/_ThorPlayer' export default function index() { const playerRef = React.useRef(null); const videoJsOptions = { autoplay: true, controls: true, responsive: true, fluid: true, sources: [{ src: 'https://obj-gravscale.zadarazios.com:443/v1/AUTH_f57eb386f52e4dc0bcdf19764aecc205/ct/bl_se.mp4', type: 'video/mp4' }] }; const handlePlayerReady = (player) => { playerRef.current = player; // You can handle player events here, for example: player.on('waiting', () => { player.log('player is waiting'); }); player.on('dispose', () => { player.log('player will dispose'); }); }; return ( <> <h1>Teste de Player: </h1> <ThorPlayer options={videoJsOptions} onReady={handlePlayerReady} /> <div></div> </> ) }

¿Podría alguien que ya haya implementado video.js en next.js ayudarme con este problema?