如何在ReactJS中切換兩個視頻時隱藏海報閃爍

我有兩個版本的SD和HD視頻，用於比較某個視頻文件的不同質量。如何在ReactJS中切換兩個視頻時隱藏海報閃爍

下面是摘錄：

<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按鈕用於改變標清和高清質量。

問題是我的視頻上也有海報圖像，這是視頻的第一幀，並且在視頻中的每個HD/SD開關上始終閃爍幾毫秒。視頻中間的第一張海報看起來很奇怪。有沒有辦法解決這個問題？

我試過去掉海報，但後來我只有黑屏閃爍。

主要想法是從切換質量的確切時刻抓取屏幕並將其放置爲海報，直到其他高質量視頻加載，但我不確定這是否可行。謝謝大家。

來源

2017-09-08 Sebastijan Dumančić

希望可以使用技術的組合輕鬆實現。

當用戶在標清和高清之間切換時，使用here描述的技術捕捉當前幀的圖像。然後從canvas，獲取圖像dataURI，將其設置爲視頻元素的海報，並切換源，然後做你的東西。

來源

2017-09-08 12:45:45 Panther

如何在ReactJS中切換兩個視頻時隱藏海報閃爍

回答

相關問題