控制视频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' }} />