Controlling poster attribute in video HTML5 tag

Question

Is it possible to control for how long the poster img shows on a HTML5 video tag? Usually image is shown until video autoplays or user press the play button but for some reason, image is staying on top of video for 1 or 2 extra secs when it autoplays.

<div id="player-container" style={{ display: parentalDisplay }}>
     <video autoPlay ref={playerRef} style={{ width: '100vw', height: '100vh' }} poster={posterURL} />
</div>

This doesn't happen on PC but as we work for a Smart TV app, hardware is usually slower and transition from poster image to video doesn't look smooth. Perhaps I can set a timer with JS, hiding the image before it starts playing? but I don't know how to control it as HTML does that job under the hood.

Answer 1

We changed the player short time ago and this wasn't happening before so I checked how it was implemented and made a workaround that perhaps helps someone else. Basically we used a style instead of poster and when video loads, I understand it does it on top of the poster img.

const [posterStyle, setPosterStyle] = useState({});

    useEffect(() => {
        if (state.currentChannel.images) setPosterStyle({ background: `transparent url('${state.currentChannel.images.ch_logo.large}') 50% 50% / 800px no-repeat  ` });
    }, [state.currentChannel.images]);

..............

<video autoPlay ref={playerRef} style={{ ...posterStyle, width: '100vw', height: '100vh' }} />