Repository navigation
Questions: hiding error overlay, hiding loading indicator, container size inquiry #574
Description
- I started integrating the Mux React Player and I am using it as a looping background video. In some cases (e.g. when my macbook goes to sleep) I get an error that says the media might be corrupt, but the player somehow recovers from this error and continues playing. However, I can't find a way to hide the error overlay, because it makes the text unreadable above the background video and it defeats the purpose. I would rather see a black background without the video playing if errors occurred during playback. Is it possible to hide the error overlay programmatically when an error occurs? Or have a callback/event when an error occurs so I can decide whether to wether hide it or not.
- Can the loading indicator be hidden? Even though I have a poster image set and all the controls hidden, I do see a loading spinner while the video loads.
- I have a container that has a specific width & height and the video player inside it should stretch it. However, until the video player loads, it has a different size and that is undesirable. Once the player initialized, it takes up the width & height of the container. Can I force the player to stretch the container initially, even while loading? (screen recording removed for privacy)
- once the user lands on the page, the player didn't stretch the container
- the poster image is not loaded until the player is not initialized
- once the player is initialized, the player gets resized to the size it was set (with classname)
- once the poster image loaded, the video starts loading and a spinner appears (that I would like to hide)
- Why does the poster image has to wait for the player to initialize? It defeats the purpose. Should I use a regular image on top of the player, until the video loads?
- Can the player use the style/classname I set before being initialized? I set the size already so I don't expect that it should resize after initialized.
- Can I hide the loading indicator?
Activity
davidkaipf commentedon Feb 16, 2023
I would like to add the following point:
Style the loading screen / hide it
I am using the mux player in a vue/nuxt environment. My client wants to have some background videos on his website on a white body. With the black loading screen, it created unpleasant black boxes at the beginning. Found nothing in the docs about styling the loading screen.
dylanjha commentedon Feb 16, 2023
@dKaipfKMS okay, a couple things here:
For background looping videos since you don't need the controls, you would probably be better off with
<MuxVideo />which is more like the HTML5 video element, instead of Mux Player. The main value of using Mux Player is the controls, so if you don't need controls at all then<MuxVideo />has everything you need (and just like the HTML5 video element it doesn't have an error screen, so you don't need to worry about hiding it).I don't think the loading indicator can be hidden right now. If you hide it, what would you expect to see while the video loads?
Yes, you can style
<mux-player>with CSS to achieve this. See Style with CSS section.The exact CSS you need will depend on the containing page. If you spin up a CodeSandbox or similar for us to look at we can provide some guidance.
What do you mean here "by the player initializing". A code sample here would be helpful. The poster image should show when the page loads. For example here
Minimal theme & default theme enhancements (#618)
luwes commentedon Mar 31, 2023
Moving this to discussion because they are grouped general questions.
They should be split up in distinct bugs / issues for the issue tracker.