#Poster

在视频播放开始前显示缩略图的海报图片组件。

#结构

<Poster src="poster.jpg" alt="Video preview" />

#行为

海报在播放开始前可见。一旦用户播放或跳转，海报将永久隐藏 — 暂停不会使其重新出现。当加载新源时，海报会重新出现。

#样式

使用 [data-visible] 属性设置海报样式：

.poster:not([data-visible]) {
  display: none;
}

你控制子 <img> 元素 — 这意味着 srcset、sizes、loading="lazy" 和框架图片组件都可以自然地工作。

#无障碍

与原生 <video poster> 属性不同，此组件允许你通过子 <img> 上的 alt 属性为屏幕阅读器提供可访问的文本替代。这意味着你可以描述海报图片（例如 alt="Keynote speaker at a conference"），或者如果它不传达有意义的信息，可以用 alt="" 标记为装饰性。

#示例

#基本用法

import { Poster } from '@videojs/react';

function Player() {
  return (
    <Player.Container>
      <Poster src="poster.jpg" alt="Video preview" />
      <video src="video.mp4" />
    </Player.Container>
  );
}

#API 参考

#状态

#Data 属性

#参见

• Thumbnail - 缩略图组件
• PlayButton - 播放按钮