Closed ADTC closed 1 week ago
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;
}
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:
img
with slot='poster'
instead of media-poster-image
.
First of all, I had to duplicate the poster in both the
video
tag (orcloudflare-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 thevideo
tag loads the first frame of the video as its own "poster" at the same time whenmedia-poster-image
is also loading an image.)So this is the setup, with duplicating the poster in both
video
andmedia-poster-image
: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.)
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.
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 forcolor
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