如何在 React js 中修复 video.js 包的 css答案

【问题标题】：how to fix css of video.js package in reacttjs如何在 React js 中修复 video.js 包的 css
【发布时间】：2020-11-25 07:26:38
【问题描述】：

我在 react 中使用 video.js 来构建视频播放器，但是当我使用 npm pacakage 安装它时，它没有提供它的内置 css 我如何添加 video.js 的内置 css，而不是控制栏我得到如图所示的东西下图

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

【问题讨论】：

标签： css reactjs

【解决方案1】：

在组件文件的顶部添加以下行：

import 'video.js/dist/video-js.css';

正如这里指出的：https://docs.videojs.com/tutorial-react.html

【讨论】：

酷，乐于助人。
但如果我更改视频，它不会在视频播放器上更新
你的意思是换视频源后样式不存在？如果是这样，请检查您在哪里导入样式。也许尝试在App.js 或其他一些父组件中导入样式。
没有风格，如果我想在视频播放器上播放其他视频，它不会播放，在视频播放器中只播放以前的视频
我看到您将视频源传递为this.props.videoUrl，只需确保父组件通过状态更改传递videoUrl。

【解决方案2】：

您的视频未播放的原因是播放器尚未准备好。我遇到了同样的问题，解决方案在文档中进行了说明。

基本上，您必须具有仅在播放器准备好时更改视频源的功能。

  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' }]);
  };

这里详细解释https://docs.videojs.com/tutorial-react.html

【讨论】：