Video.js

Question

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

为什么你需要这两个？

我认为这是其中之一。所以我尝试只使用 npm 包。我的 React class 看起来像：

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 包仅包含需要使用的 javascript，以便运行您的 video.js 做出反应，但不包含 css。因此，需要指定包含 css 的单独文件并将其导入 React component。在您的 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" }),

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

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

npm

reactjs