How to hide poster flashing when switching between two videos in ReactJS

Question

I have a video with two versions, SD and HD, which is used to compare different qualities of a certain video file.

Here is the snippet:

<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 and handleIsHD just calls functions that set the other video to play, it's not important for this question.

isObscured is used as an overlay before first play of the video, and is invisible later on.

video__switch__value button is used for changing between SD and HD quality.

The problem is that I have also poster image on the videos which is a first frame from a video, and it always flashes for a few ms on each HD/SD switch in the video. And the first frame poster in the middle of a video looks really odd. Is there some way to fix this?

I've tried removing the poster, but then I only get black screen flashes.

Main idea is to grab the screen from the exact moment of switching quality and placing it as a poster until the other quality video loads, but I'm not sure that is doable. Thanks all.

score 2 · Accepted Answer · answered Sep 08 '17 at 12:45

Hope that can be easily achieved using combination of technique.

When the user changes between SD and HD, then capture a image of the current frame using techniques described here. Then from the canvas, get the image as dataURI, set it as a poster of the video element and switch the source and then do your stuff.

How to hide poster flashing when switching between two videos in ReactJS

1 Answers1