I am trying to set centered a videoJS for HLS video streaming in React using display: flex in the parent div, but it makes the <div data-vjs-player>
not visible (even though the audio still works). So far, and after lots of searches here and other forums + asking chatGPT, I have been able to establish the width and height of the video, but not able to fully center it in the visualizer_root
. Here is the code of the components and the CSS:
Component that receives the ID of the video for the HLS streaming and establishes some options:
import React from 'react';
// This imports the functional component from the previous sample.
import Visualizer from "../../Visualizer/VisualizerMain";
import './MoviesComponentsStyles.css'
import videojs from "video.js";
export default function MoviesComponentsMain(props){
const id = props.id
const playerRef = React.useRef(null);
const videoJsOptions = {
autoplay: true,
muted: true,
controls: true,
responsive: true,
fluid: true,
sources: [{
src: 'http://localhost:8000/api/movie_stream/'+id+'/'+id+'.m3u8',
type: 'application/x-mpegURL'
}]
};
const handlePlayerReady = (player) => {
playerRef.current = player;
// You can handle player events here, for example:
player.on('waiting', () => {
videojs.log('player is waiting');
});
player.on('dispose', () => {
videojs.log('player will dispose');
});
};
return (
<div id={'visualizer_root'}>
<div id={'visualizer_movie_header'}>
</div>
<div id={'visualizer_movie_video'}>
<Visualizer options={videoJsOptions} onReady={handlePlayerReady}/>
</div>
<div>Rest of app here</div>
</div>
);
}
Its corresponding CSS:
#visualizer_root{
width: 1000px;
height: 1000px;
max-width: 100vh;
}
#visualizer_movie_video{
}
Child component where the final video is rendered:
import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default function Visualizer(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) {
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
const videoElement = document.createElement("video-js");
videoElement.classList.add('vjs-fill');
videoRef.current.appendChild(videoElement);
const player = playerRef.current = videojs(videoElement, options, () => {
videojs.log('player is ready');
onReady && onReady(player);
});
// You could update an existing player in the `else` block here
// on prop change, for example:
} else {
const player = playerRef.current;
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.isDisposed()) {
player.dispose();
playerRef.current = null;
}
};
}, [playerRef]);
return (
<div data-vjs-player>
<div ref={videoRef} />
</div>
);
}
Is there anything I can be missing out? Right now I am not fully sure and I would appreciate your help.
Thanks
You need to sign in to view this answers
Leave feedback about this