-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Poster loading cuts through pitch black instead of given BG Color, and takes longer than expected to download #904
Comments
if you use Media Chrome it's best not to use the 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 use your first CSS rule.
|
Thanks @luwes I have changed Also, I still must have 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 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:
|
This doc change is inspired by the comment by @luwes here: muxinc#904 (comment)
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
The text was updated successfully, but these errors were encountered: