how to fix css of video.js package in reacttjs - css

Question

im using video.js in react for building video player but when im installing it using npm pacakage its does not provide its inbuilt css how i can add inbuilt css of video.js, instead of control bar im getting something like shown in picture below
import React, { Component } from 'react';
import videojs from 'video.js';
import { sendData } from '../../analytics/sendData';
class Video360Player extends Component {
componentDidMount() {
// instantiate Video.js
const videoJsOptions = {
autoplay: true,
controls: true,
sources: [{
src: this.props.videoUrl,
type: 'video/mp4'
}]
}
this.player = videojs(this.videoNode, videoJsOptions,this.props, function onPlayerReady() {
console.log('onPlayerReady', this)
});
}
// destroy player on unmount
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
// wrap the player in a div with a `data-vjs-player` attribute
// so videojs won't create additional wrapper in the DOM
// see https://github.com/videojs/video.js/pull/3856
render() {
return (
<div>
<div data-vjs-player>
<video ref={ node => this.videoNode = node } className="video-js"></video>
</div>
</div>
)
}}
export default Video360Player

Answer 1

Add the following line on top of component file:
import 'video.js/dist/video-js.css';
As pointed here: https://docs.videojs.com/tutorial-react.html

Answer 2

The reason your video is not playing is because the player is not ready. I ran into the same problem and the solution is explained in the documentation.
Basically, You must have a function to change the video source only when the player is ready.
const changePlayerOptions = () => {
// you can update the player through the Video.js player instance
if (!playerRef.current) {
return;
}
// [update player through instance's api]
playerRef.current.src([{ src: 'https://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' }]);
};
It is explained in details here https://docs.videojs.com/tutorial-react.html