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

Posted 2023-02-25

【中文标题】React - 如何调整视频反应播放器的大小？

【英文标题】：React - How to resize a video-react Player?

【发布时间】：2018-07-11 15:22:49

【问题描述】：

我阅读了文档 (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;

【参考方案1】：

只是没有引起注意，因为 Video-React 文档 (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 类，就像发生在我身上一样。为您的组件创建一个空类也很重要，如下所示： App.js：

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

在你的 sccs 文件中： .scss

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

.example-classe 
 margin-top: 4px;


.blah 

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

【参考方案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>