Video.js - Why need both npm module and <script> tag?

Question

According to the official Video.js documentation (http://docs.videojs.com/docs/guides/setup.html), you add the script tags for the js and css to your page. Then, you install the package manager via npm or bower.

Why do you need both of these?

I would think it's either one of the other. So I tried just using the npm package. My React class looks like:

import React, { Component } from 'react';
import videojs from 'video.js';

export default class MyVideoContainer extends Component {

  constructor(props) {
    super(props);
    this.state = { };
  }

  render() {
    return <div>
        <video id="test_video_1" className="video-js vjs-default-skin" controls preload="auto" width="640" >
          <source src="MY_VIDEO.mp4" type="video/mp4" />
          <p className="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>
      </div>;
  }

  componentDidMount() {
    videojs("test_video_1", {}, function(){

    });
  }

}

The javascript appears to load correctly, but no CSS gets applied to the video, so it looks like pure garbage. There are a bunch of form buttons underneath the video for Play and Pause, and all kinds of crazy stats.

But it works better if I just use tags with no videojs import.

I would prefer to use the npm module, but can't get the CSS to work correctly. What am I doing wrong?

Answer 1

As the Video.js docs says you need npm and also the css to run video.js properly on your system. The npm package only contains the javascript that needs to be used in order to run your video.js in react but doesn't contain the css. So a separate file that contains the css needs to be specified along with importing it in your React component. Mention this in your index.html and you will see the styles loading properly

<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">