这个视频我们给播放列表添加一个控制播放上一个和下一个视频的按钮 … 先去添加按钮必须的 html 代码 …

先用一个 <a> 标签 … 里面的锚文本可以用一个向左的箭头 .. &lsaquo;

在 <a> 标签上，我们要添加一个类 … class="fp-prev" 这行代码是控制播放上一个视频的按钮 …

下面我们再去添加控制播放下一个视频的按钮 … 先复制这行代码 … 粘贴 … 再修改一下 ..

这里我们用一个 向右 的箭头 …

控制播放下一个视频的按钮上的类应该是 fp-next … fp 就是 flowplayer 的简称 … next 表示下一个 ..

按钮样式

准备好需要的 HTML 以后，下面我们去给按钮添加样式 … 打开 playlist.css 这个样式表　… （# 实时预览）

先输入样式的选择器 …

.fp-prev, .fp-next{}

这个选择器的意思就是，我们要同时为这两个类添加一些样式 …

先定义它们的位置属性 … position … 设置为 absolute … 绝对的位置 ...

position:absolute;

然后让它相对播放器垂直居中显示 … 可以设置五上 bottom … 设置为 50% … 再设置下字体 font-family:sans-serif

上一个，下一个

下面我们再分别设置一下这两个按钮的位置 … 先设置一下 .fp-prev …

.fp-prev{}

用 left 属性 .. 设置为 -40px … 这样控制播放上一个视频的按钮，会相对于播放器的左边，向左偏移 40 个像素 ..

然后我们再设置一下控制播放下一个视频的按钮 …

.fp-next{} … 我们让它基于播放器向右偏移 40 个像素 … 用 right 属性 … 值是 -40px

继续

下面我们再去设置一下按钮的大小 … font-size:35px;

让按钮可以点击的区域大一些 … 我们可以把它转化为 block 元素 … display: inline-block .. 设置为行内级别的块级元素 ..

然后设置一下它的高度和宽度 …. height:35px; width:35px ….

再设置一下行高 … line-height: 25px … 让按钮文字居中显示 … text-align:center;

下面可以再设置文字的颜色 … color:#ccc; 这是一种灰色 ...

为了让鼠标放在按钮上使用鼠标指针变成指向的样式 … 可以设置 cursor 为 pointer …

cursor:pointer;

.is-mouseover

下面我们可以给按钮添加鼠标悬停的样式 … 这里我们并不直接设置按钮的悬停样式 … 而是借助 flowplayer 给我们提供的一个有用的类 .. is-mouseover … 当用户把鼠标放在播放器上面的时候

flowplayer 会为播放器添加这个 is-mouseover 的类..

这个样式的选择器可以这样来写 …

.is-mouseover .fp-prev, .is-mouseover .fp-next{}

然后里面用 color 属性设置一下颜色 … 这里我们设置成黑色 … 去掉下划线 tdn

保存 …

测试

去浏览器上测试一下 ….

这里你会看到，播放器的左右两边各有一个按钮 …. 鼠标放在播放器上面的时候 … 按钮的颜色会改变 …

点击按钮 … 可以播放，在播放列表里面的，下一个 … 或者 上一个 视频 ….

HTML
<a class="fp-prev">&lsaquo;</a>
<a class="fp-next">&rsaquo;</a>

CSS

.is-mouseover .fp-prev, .is-mouseover .fp-next{
color:#000;
}
.fp-prev, .fp-next{
position:absolute;
bottom:50%;
cursor:pointer;
font-size:35px;
color:#ccc;
display:inline-block;
height:35px;
width:35px;
text-align:center;
line-height:25px;
}

.fp-prev{left:-40px}
.fp-next{right:-40px;}