ドキュメント（https://video-react.js.org/components/player/）を読み、ビデオの幅と高さを変更しようとしましたが、機能しませんでした。ここでも同じ問題が見つかりました：video-react属性の幅と高さが機能していません
流体を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;
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;
もう1つのヒント：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 {
}
それは私のために働いた。それがあなたにも役立つことを願っています！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加