Video.js -为什么需要npm模块和<script>标签？

Question

根据官方的Video.js文档(http://docs.videojs.com/docs/guides/setup.html)，可以将js和css的脚本标记添加到页面中。然后，通过npm或bower安装软件包管理器。

你为什么需要这两个？

我觉得要么是另一个。所以我试着用npm包。我的反应课看起来像是：

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(){

    });
  }

}

javascript看起来加载正确，但是没有将CSS应用到视频中，因此它看起来像是纯垃圾。视频下面有一堆表单按钮，用于播放和暂停，以及各种疯狂的统计数据。

但如果我只使用没有视频it导入的标签，效果会更好。

我更喜欢使用npm模块，但无法使CSS正确工作。我做错了什么？

Answer 1

正如Video.js文档所述，您需要npm和css才能在您的系统上正确地运行video.js。npm包只包含为运行video.js而需要使用的javascript，而不包含css。因此，除了在React component中导入css之外，还需要指定包含css的单独文件。在您的index.html中提到这一点，您将看到正确地加载样式

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

Answer 2

如果您使用webpack，您也可以尝试ProvidePlugin选项，从

https://github.com/collab-project/videojs-record/issues/123#issuecomment-282522353

new webpack.ProvidePlugin({ videojs: "video.js", "window.videojs": "video.js" }),