Flowplayer 有一个引导页面的功能，也就是网页显示以后，只显示我们在播放器上设置的封面图像，并不去加载播放的内容。

就是 HTML5 模式下，不载入 <video> 标签 … Flash 模式下不载入 object ..

当用户点击封面图像以后，flowplayer 才会载入要播放的内容 … 这就是 Flowplayer 的 Splash screen 引导页面的功能。

使用这个功能的好处是网页的载入速度会提高很多 … 比较适合想同时在一个页面上使用很多个播放器 …

注意，这个 splash screen 的功能，有点像 poster ，这里我们添加了两个播放器，使用的就是视频的 poster 添加的视频封面 …

我们可以审核一下播放器元素 … 你会发现，这里有 <video> 标签的内容 … 说明播放器已经加载了 …

点击播放一个视频 … 同时我们可以点击播放另一个视频 …

如果使用 Splash screen 的话，我们一次只能播放一个视频 … 也就是点击播放一个视频 … 当点击播放另一个视频的时候，之前播放的视频会自动停止并且会被移除掉。

回到网页项目的代码 …

在播放器上使用 splash screen 的功能，我们要先在播放器上添加一个 is-splash 的类 …

然后可以使用内联的形式，去为这个播放器容器添加背景图像，这个背景图像就是引导页面的图像 … 可以是视频的封面图像 …

我们先复制一下 poster 里面的这个图像的地址 … 然后去掉 poster 属性 …

因为我们可以使用 splash screen 代替 poster..

在播放器的容器上，用 background … 去添加 splash 背景图像 … 这里我们直接把样式添加到这个 <div> 标签上 ….

style="background:url( video/croods-tlr3_h720p.png);"

再添加一个 background-size … 设置背景的尺寸为 100% … 这样这个引导页面图像也会变成响应式的 …

同样的方法我们可以再处理一下另外一个播放器 …

先添加一个 is-splash … 设置一下引导页面的背景 … 去掉 poster 属性 …

然后保存 …

回到浏览器 …. 刷新 … 现在播放器就使用了引导页面的功能，表面上看起来跟 poster 没啥区别 ..

我们可以查看一下元素 …

你会发现 … 播放器容器里的 <video> 标签没有载入进来 …

点击播放 …. 现在 Flowplayer 才会载入视频来播放 …

如果我们点击页面上其它的播放器来播放视频 … 之前播放的视频会自动停止 …

在视频播放的时候 … 按一下 ESC 键 … 可以取消载入视频，退回到引导页面上 ….