Autoplay with blurhash + poster flashes black before playing

[beamercola]

Which Mux Elements/Packages has a bug?

• mux-video

Which browser(s) are you using?

Chrome

Which operating system(s) are you using?

macOS

How are you using Mux Elements?

npm package

Describe the bug

Video with blurhash and poster flashes black before playing

Steps To Reproduce

1. Cold refresh

Link to code example: https://codesandbox.io/s/wonderful-ben-epm453?file=/pages/basic.jsx

[dylanjha]

@beamercola thanks for opening + thanks for the code sandbox.

I just want to make sure, are you expecting that when you use autoPlay that the blurhash and poster never shows? If that is the case, would you expect to see a spinner on a black background while the video is loading?

[beamercola]

@dylanjha Thanks for the reply! I see the blur load, then the poster loads, then it flashes black, then shows the poster some more, then the video plays.

Personally, I would prefer it to blur > poster until it's 100% ready > then swap poster for video

I'd prefer if the loading indicator was optional. For us we're using them ambient hero background videos

https://user-images.githubusercontent.com/8060/206820164-225e6fd8-b05a-4483-a2b7-0afcff9137c2.mov

[beamercola]

Here's it in real-world from a fresh load. These are on each page, so it can be jarring navigating between categories.

It has the blur, and it has the poster, so it's not like they haven't loaded yet

https://user-images.githubusercontent.com/8060/206820718-845e62fa-79f8-419b-a031-0797f8fbcd78.mov

[dylanjha]

Thank you @beamercola -- appreciate the details.

It's going to take us a little time to get to this given our current bandwidth but this repro case helps.

Also, if you're hiding all the controls and using this as a heroku background, you may want to check out <mux-video> as an alternative to <mux-player>:

• https://github.com/muxinc/elements/tree/main/packages/mux-video
• https://github.com/muxinc/elements/tree/main/packages/mux-video-react

<mux-video> is a "Mux flavored HTML5 video element" -- it doesn't give you any of the UI that Mux Player does (controls, loading indicator, etc.), it behaves just like the HTML5 video element. To get the equivalent behavior that you're going for here you'd have to:

• handle the CSS yourself for showing the blurhash placeholder
• use next/dynamic to do the lazy-loading of the player javascript

Either way, this is on our list to fix, but <mux-video> is typically more suited for the ambient background use cases since you don't care about the controls and UI elements.

[kelihansen]

I've also been struggling to use placeholder (with MuxPlayer from @mux/mux-player-react/lazy in my case). I've ended up with an all-css approach, e.g.

<MuxPlayer
  style={{
    "--media-background-color": "transparent",
    "--controls-backdrop-color": "transparent",
    backgroundImage: `url(${blurHashBase64})`,
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    aspectRatio: `${item.aspectRatio.replace(":", "/")}`
  } as React.CSSProperties}
  // ...

but I wish placeholder={blurHashBase64} alone did the job 🤔