http://flowplayer.org/designer/
flowplayer 的官方网站提供了一个可以在线设计播放器皮肤的功能，我们可以先选择一款基本的皮肤 … 最上面会显示 Flowplayer 默认带的三款皮肤 …
每款皮肤还有几种不同的样式 … 这里我们基于 minimalist 去定制一个皮肤 … 选择它的第三种形式 … 然后我们再修改一下控制栏的样式 …
Controlbar
Overlayed 可以控制，控制栏是否会覆盖显示在视频之上 … 取消这个选项 … 控制栏会紧接着视频底部显示 …
然后我们再去修改一下控制栏上不同地方的颜色 … Background 就是控制栏的背景颜色 … 点击后面的颜色块 … 可以打开一个颜色选择器去选择想要的颜色 ..
或者我们也可以直接在它前面的文本框里输入颜色的值 … 背景我们设置为 #232323 … 一种深灰色 ..
Timeline 是播放器时间轴的背景颜色 … 设置成 #3f3f3f … Progress 是视频播放进度的颜色 … 我们用一种绿色 … #1b7e5a …
Buffer 是视频下载进度的颜色 … 我们可以设置成一种比时间轴深一点的颜色 … #323232
最后的这个 Site Background 是网站背景的颜色 … 这里我们可以不用管它 …
UI
UI 这块可以控制在播放器上显示的东西 .. Time 是时间 … Top/Left ，可以让时间显示在播放器的左上角 … Volume 时音量 … Slider 是控制音量的滑块 …
Play 是播放按钮 … 我们可以加上这个 …
Embed 是播放器的嵌入功能 … Fullscreen 可以全屏幕播放视频 … Dark icons 可以使用暗色的按钮元素 …
Features
Features 上可以设置播放器的功能 .. 勾选 Playlist 可以开启播放列表 … Keyboard shortcuts 是播放器的快捷键的功能 ..
Google analytics 是 Google 分析的功能 … Subtitles 是视频的字幕 …
Playback
Playback 是跟播放相关的一些特性 … Start width a splash image .. 可以使用播放器的引导页的功能 … Preload video 选项可以决定是否要预先载入视频 …
Loop 是播放器的循环播放的特性 …
完成
都设置好以后，我们可以点击 View source … 查看源代码 …
你可以看到，最开始嵌入了 flowplayer 的 minimalist 皮肤 …
这个 custom player skin 下面的样式，是我们通过设计器设计的播放器皮肤的样式 … 我们可以复制这块样式，到自己的网页项目的样式表里 …
另外，如果你修改了播放器的其它的设置 .. 在播放器容器上面 … 会有一些额外的 css 类 … 你可以复制这些类到你的播放器的容器上 …
这里我们先只复制自定义的播放器皮肤的样式 …
放在 style.css 这个样式表上 …
然后打开浏览器 …
你会看到 … 播放器的样式会变成我们在皮肤设计器里修改的那样 …
