我阅读了文档(https://video-react.js.org/components/player/ https://video-react.js.org/components/player/)并尝试更改视频的宽度和高度,但没有成功。
我在这里也发现了同样的问题:video-react 属性宽度和高度不起作用 https://stackoverflow.com/questions/44917569/video-react-attribute-width-and-height-is-not-working
即使将流体设置为 false 并且它不起作用,如何调整视频大小?
My code:
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;
这只是一个疏忽,因为 Video-React 文档 (https://video-react.js.org 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 {
}
这对我有用。我希望它也能帮助你!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)