reactjs - React - 如何调整视频 react 播放器的大小？

Question

我阅读了文档( https://video-react.js.org/components/player/ )并尝试更改视频的宽度和高度，但没有用。
我在这里也发现了同样的问题:
video-react attribute width and height is not working

即使将流体设置为 false 并且它不起作用，我该如何调整视频？

我的代码:

import React, { Component } from 'react';
import './App.css';
import { Player } from 'video-react';

class App extends Component {
  render() {
    return (
      <Player
        playsInline
        poster="/assets/poster.png"
        src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        fluid={false}
        width={100}
        height={50}
      />
    );
  }
}

export default App;

Answer 1

这只是一个疏忽，因为 Video-React Docs ( https://video-react.js.org ) 解释说我们必须导入 .css 文件来更改我们视频组件的布局。
我所做的只是导入 .css 文件并调整视频大小:

import React, { Component } from 'react';
import "../node_modules/video-react/dist/video-react.css";
import './App.css';
import { Player } from 'video-react';

class App extends Component {
  render() {
    return (
      <Player
        playsInline
        poster="/assets/poster.png"
        src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        fluid={false}
        width={480}
        height={272}
      />
    );
  }
}

export default App;

另一个提示:如果您使用 sccs 文件，则必须在 sccs 文件的顶部导入 sccs 视频文件 (@import "~video-react/styles/scss/video-react";)，否则您自己的类定义可以覆盖原来的 scss video-react 类，就像我遇到的那样。为您的组件创建一个空类也很重要，如下所示:
应用程序.js:

<div className="column blah">
    <Player />
</div>

在您的 sccs 文件中:
.scss

@import "~video-react/styles/scss/video-react";

.example-classe {
 margin-top: 4px;
}

.blah {
}

它对我有用。我希望它也能帮助你!