Flowplayer 的皮肤,就是播放器的样式,都是用 CSS3 来设计的。 Flowplayer 给我们准备了三款皮肤,你可以基于这些皮肤去修改,或者也可以从头来设计自己的播放器皮肤。
我们之前已经看到了 flowplayer 的 minimalist 这款皮肤的样式 … 下面我们再试其它两款皮肤 …
先找到嵌入播放器皮肤样式表的代码 …. 修改一下 … flowplayer 的皮肤在 skin 这个目录下面 … (#点击边栏)
先看一下 playful.css 这个皮肤 …
<link rel="stylesheet" type="text/css"
href="flowplayer-5.4.3/skin/playful.css">
保存 … 回到浏览器 … 现在播放器用的就是 playful 这款皮肤 … (# 随便点点 )
再回到网页项目 … 然后试一下 functional 这个皮肤 …
<link rel="stylesheet" type="text/css"
href="flowplayer-5.4.3/skin/functional.css">
保存 …
现在播放器的样式就是在 functional.css 样式表里设计的 …
选项
下面我们再去看看 Flowplayer 为播放器皮肤提供的一些额外的 CSS 类 … 在播放器上添加这些类,可以改变播放器的样式 …
比如现在播放器,当我们把鼠标放在播放器上面的时候,才会显示控制栏 … 如果你想让控制栏一直显示在这里,我们可以添加一个
.fixed-controls 的 CSS 类到播放器上面 ...
我们先把播放器的皮肤改回成 minimalist …
然后找到播放器的代码 … 在播放器容器的上面 … 添加一个 .fixed-controls …
保存 … 回到浏览器 …
现在不管我们是否把鼠标放在播放器上面,控制栏会一直显示 ….
下面我们再去试几个 …
加上一个 color-alt … 保存 … (#播放)
默认的播放进度是蓝色的 .. 加上 color-alt 以后,播放进度会变成白色 … 类似的还有 color-alt2 ….
现在播放进度会变成红色 … 再试一下 color-light … 这个类是针对亮色的视频优化的样式 .
播放按钮会变成黑色 … 控制栏会变成白色 …
另外还有一些类可以控制,播放器控制栏上的元素的显示 … 比如,添加一个 no-volume 类 … 可以去掉控制音量的东西 … 用 no-mute … 可以去掉静音选项 …
加上一个 aside-time 可以让时间显示在播放器的左上角 … 或者,你不想显示时间 … 可以加上一个 no-time …
想在控制栏上加上一个播放或暂停的按钮,可以添加一个 play-button 类 …