Question

我有一个视频有两个版本，SD和HD，用于比较某个视频文件的不同质量。

以下是摘录：

<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开关上总是闪烁几毫秒。而视频中间的第一帧海报看起来很奇怪。有办法解决这个问题吗？

我已经尝试删除海报了，但之后我只是黑屏闪烁。

主要想法是从切换质量的确切时刻抓住屏幕并将其作为海报放置，直到其他质量视频加载，但我不确定这是否可行。谢谢大家。

Answer 1

希望使用技术组合可以轻松实现。

当用户在SD和HD之间切换时，使用here所述的技术捕获当前帧的图像。然后从canvas获取图像dataURI，将其设置为视频元素的海报并切换源，然后执行操作。

如何在ReactJS中切换两个视频时隐藏海报闪烁

1 个答案: