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

Question

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

为什么你需要这两个？

我认为这是其中之一。所以我尝试只使用 npm 包。我的 React 类如下所示：

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 应用于视频，因此它看起来像是纯粹的垃圾。视频下方有一堆用于播放和暂停的表单按钮，以及各种疯狂的统计数据。

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

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

Answer 1

正如Video.js文档所说，你需要 npm 和 css 才能video.js在你的系统上正常运行。npm 包仅包含运行 React 所需的 javascript，video.js但不包含 css。因此，需要指定一个包含 css 的单独文件，并将其导入到您的React component. 在您的文件中提及这一点index.html，您将看到样式正确加载

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