Question

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

即使将Fluid设置为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

这只是一个缺少注意的地方，因为视频反应文档（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视频反应类，就像我遇到的那样。为您的组件创建一个空类也很重要，如下所示：
App.js：

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

在您的sccs文件中： .scss

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

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

.blah {
}

对我有用。希望对您有帮助！

Answer 2

遇到类似问题时，我将高度和宽度设置为100％，然后将内部设置了高度和宽度的a放置在其中。试试这个：

<div style="height:50px; width:100px">
  <Player
    playsInline
    poster="/assets/poster.png"
    src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    fluid={false}
    width={100%}
    height={100%}
  />
</div>

React-如何调整视频反应播放器的大小？

2 个答案: