how to fix css of video.js package in reacttjs

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

Mr_Green · Accepted Answer · 2020-11-25 07:30:21Z

4

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

answered Nov 25, 2020 at 7:30

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mr_Green Over a year ago

Cool, happy to help.

jyoti Over a year ago

but if i change video it not get updated on video player

Mr_Green Over a year ago

Do you mean the styles are not present if you change the video source? if so, check where exactly you are importing the styles. Maybe try importing styles in App.js or some other parent components.

jyoti Over a year ago

no not style if i want some other video to play on video player its not gonna play ,in video palyer only previous video only playing

Mr_Green Over a year ago

I see you are passing the video source as this.props.videoUrl, just make sure the parent component is passing the videoUrl through state change.

Ayman Ali · Accepted Answer · 2022-01-12 15:51:15Z

0

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

answered Jan 12, 2022 at 15:51

Ayman Ali

11 bronze badge

Collectives™ on Stack Overflow

how to fix css of video.js package in reacttjs

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related