为视频添加封面图像有两种方法，你可以在 <video> 标签上添加 poster 属性，然后指定要使用的封面图像的位置 … 或者我们也可以使用 CSS ，为播放器的容器去添加背景图像。

不管用哪种方法，flowplayer 都会在播放器的容器上面，添加一个 .is-poster 的 CSS 类。

我们可以把这两种方法配合在一起使用，这样可以得到一些比较有趣的效果，你可以使用 CSS 控制封面图像的位置，尺寸，可以添加动画效果等等。

如果同时使用这两种方法添加封面图像，Flowplayer 会优先使用在 <video> 标签上的 poster 属性里指定的封面图像 ..

验证

我们先用 Chrome 浏览器的开发者工具，查看一下播放器 … 因为之前我们在 <video> 标签上添加了 poster 属性 … 所以在播放器的容器上，flowplayer 会添加一个 .is-poster 的类。

同时添加的封面图像，也会作为播放器容器的背景图像 …

CSS

下面我们给页面添加一个样式表，在后面我们需要用到这个样式表，为播放器或者页面，去添加一些自定义的样式。

先新建一个目录 …. 命名为 css

在这个目录下面，新建一个样式表 … 命名为 style.css …

打开网页 … 使用 link 标签，把这个样式表链接到页面上 ….

再打开这个样式表 …. 先添加一个简单的样式 … 为播放器的容器 … 去设置一个背景的颜色 …

播放器上我们添加了一个 ninghao-player 的 css 类 … 可以使用这个类作为样式的选择器 …

.ninghao-player {
background-color: #000
}

在浏览器上预览一下 …

现在播放器的背景就会变成黑色的了 ….