how to fix css of video.js package in reacttjs

user_14078968 0
Viewed 2082

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

enter image description here

reactjs css
2 Answers
user_15773960

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

user_97721640
Related