控制视频 HTML5 标签中的海报属性

Question

是否可以控制海报 img 在 HTML5 视频标签上显示多长时间？ 通常会显示图像，直到视频自动播放或用户按下播放按钮，但由于某种原因，图像在自动播放时会在视频顶部停留 1 或 2 秒。

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

这不会发生在 PC 上，但当我们为智能电视应用程序工作时，硬件通常较慢，从海报图像到视频的过渡看起来并不顺畅。 也许我可以用 JS 设置一个计时器，在图像开始播放之前隐藏它？ 但我不知道如何控制它，因为 HTML 在幕后完成了这项工作。

Answer 1

我们不久前更换了播放器，这在以前没有发生过，所以我检查了它是如何实现的，并制定了一个可能对其他人有帮助的解决方法。 基本上我们使用了一种风格而不是海报，当视频加载时，我知道它是在海报 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' }} />