播放列表就是制作一个视频的列表，然后播放器可以按照这个列表里的顺序去播放视频，用户也可以任意选择列表里的视频去播放 …

先来看一下在 Flowplayer 上创建播放列表的基本方法 …

在播放器容器的里面 … 就是这个带有安装播放器时的 CSS 类的 <div> 标签 … 把播放列表放在播放器容器里面的好处是，我们可以根据播放器的不同的状态，去设计播放列表的样式 ..

比如你可以分别去设计在视频暂停或者播放时的播放列表的样式。

在这个 <video> 标签的下面 ，我们可以去添加视频的播放列表 …

先输入一组 <div> 标签 … 上面添加一个 CSS 类 … 类名是 .fp-playlist .. 这是 Flowplayer 默认的播放列表容器的类名 …

div.fp-playlist

<div class="fp-playlist"></div>

你可以修改播放列表的 query 配置选项 … 去重新设置这个类名 …

播放列表里的每个项目都可以使用一个 <a> 标签去定义 …

a[href="../video/croods-$$.mp4" style="background:url(../video/croods-p-$$.jpg)"]*3

在 <a> 标签里面的 href 属性里 .. 可以去设置视频的位置 .. 然后我们可以使用 CSS 为这个播放列表项目添加一个背景图像 …

这样我们就创建了一个视频列表 … 里面有三个视频 … 下面我们到浏览器上去预览一下 …

这里并没有显示播放列表 … 这是因为我们需要手工为这个播放列表添加一些样式才能让这个播放列表显示出来 …

在下面视频里我们再去看一下 ….