Poster loading cuts through pitch black instead of given BG Color, and takes longer than expected to download

[ADTC]

First of all, I had to duplicate the poster in both the video tag (or cloudflare-video in our case), because otherwise the poster will sometimes cut through the first frame of the video, which already looks odd. (It's because the video tag loads the first frame of the video as its own "poster" at the same time when media-poster-image is also loading an image.)

So this is the setup, with duplicating the poster in both video and media-poster-image:

<media-controller>
  <video slot='media' src="..." poster="(image URL)"></video>
  <media-poster-image slot='poster' src="(image URL)"></media-poster-image>
  <media-control-bar>...</media-control-bar>
</media-controller>

This avoids the problem of the poster cutting through first video frame, but the poster is still cutting through pitch black for some reason.

For testing, I have tried this CSS setup number 1, and I find the result that background starts with yellow first, poster starts loading, still with yellow background, but suddenly the background changes to black mid-way when the poster is still loading. (Note: For testing, I'm force-reloading the page. In typical case, this only occurs when the page first loads.)

media-controller {
  background-color: yellow;
  --media-background-color: red;
  --media-secondary-color: green;
}

Video removed for privacy reasons.

For second testing, I have tried this CSS setup number 2, and I find the result that background starts with red first, poster starts loading, still with red background, but suddenly the background changes to black mid-way when the poster is still loading.

media-controller {
  /* Disabled --> background-color: yellow; */
  --media-background-color: red;
  --media-secondary-color: green;
}

Video removed for privacy reasons.

The two test cases are meant to show that the result is still the same whether I use background-color or --media-background-color. Of course, the --media-secondary-color only applies to the control bar so it's irrelevant to our discussion here. I searched for color through the entire list, and I couldn't find anything else I could potentially change from pitch black.

Of course there's also the problem of a 51KB image file taking so long to download and render. My internet connection is pretty fast enough, I'd think. I think I've seen another issue where this was already mentioned, and it was said it's because the poster can only load once the Javascript has loaded, and some alternatives using img tag or slots were proposed so the browser can load the image ahead of time before scripts load.

Testing was done in Chrome browser, on macOS. Thank you for your replies @cjpillsbury @luwes

[luwes]

if you use Media Chrome it's best not to use the <video> poster attribute but use an <img> tag with poster slot for the most control and best performance. the <media-poster-image> will perform less well because indeed the JS has to be finished loading first, we still need to document this better and possibly make that component progressive enhancement able.

I put an example here https://codesandbox.io/p/sandbox/media-chrome-cloudflare-video-element-g9jvzg?file=%2Findex.html%3A46%2C2-49%2C9

could you fork this and show a reproduction of the issue you're having? that will be easier to debug.

---

if you have direct access to the <media-controller> element it's best not to use the CSS var --media-background-color because that will only become available once the JS has loaded.

use your first CSS rule.

media-controller {
  background-color: yellow;
}

[ADTC]

Thanks @luwes I have changed media-poster-image to the img tag now because it's clearly better and not dependent on JS. It can preload as well. However, practically things look pretty much the same. Maybe the improvement is too negligible.

Also, I still must have poster attribute in the video tag (or cloudflare-video) because I'm using preload=auto and so sometimes the video will show the first frame before the poster image can be shown above it. Sometimes you'll see top-half poster image and bottom-half first frame (just for a few hundred milliseconds), which is really odd looking. The only way to solve this is by adding the image as a poster attribute in the video tag.

None of these solve the original problem that there is a momentary pitch black fill (as demoed by the two videos). I expect that the video frame be filled by the given color (whether it be background-color or --media-background-color) but this only happens for a few hundred milliseconds in the beginning before it gets replaced by pitch black while the poster is still loading.

I'm guessing this has something to do with how HTML5 video functions, but I hoped it has something to do with how Media Chrome is doing things.

PS: Suggestions for documentation:

1. The poster image page should have a note that we should prefer using img with slot='poster' instead of media-poster-image.
2. There could be a "Slots Reference" page in the Resources section which lists all possible slots and the specific information related to each slot.