1
特定のビデオファイルのさまざまな品質を比較するためにSDとHDという2つのバージョンのビデオがあります。ここでReactJSで2つのビデオを切り替えるときにポスターが点滅するのを隠す方法
は抜粋です：
<div className={`video__switch ${isObscured ? "" : "is-obscured"}`}>
<button className={`video__switch__value u-type--sans u-type--delta u-slant ${isHD ? "" : "active"}`} onClick={this.handleIsSD.bind(this)}>
<span className="u-unslant u-type--bold">SD</span>
</button>
<button className={`video__switch__value u-type--sans u-type--delta u-slant ${isHD ? "active" : ""}`} onClick={this.handleIsHD.bind(this)}>
<span className="u-unslant u-type--bold">HD</span>
</button>
</div>
<div className={`video__media ${isObscured ? "" : "is-obscured"}`}>
<video loop ref="vidRef" poster="images/poster.jpg" className="header__video js-headerVideo" src={videoUrl} />
</div>
handleIsSDとhandleIsHDはちょうどそれがこの質問のために重要ではありません、再生するために他のビデオを設定する関数を呼び出します。
isObscuredは、ビデオの最初の再生前のオーバーレイとして使用され、後で見えません。
video__switch__valueボタンは、SD画質とHD画質の切り替えに使用されます。
問題は、ビデオの最初のフレームであるビデオにポスター画像があり、ビデオの各HD/SDスイッチで常に数ミリ秒間点滅することです。そして、ビデオの途中の最初のフレームポスターは本当に奇妙に見えます。これを修正する方法はありますか？
ポスターを削除しようとしましたが、黒い画面しか点滅しません。
主なアイデアは、スイッチング品質の正確な瞬間から画面をつかんで、ポスターとして他の品質のビデオが読み込まれるまで配置することです。でも、それが実行可能かどうかはわかりません。皆さんありがとう。