皮肤设计器

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

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 这个样式表上 …

然后打开浏览器 …

你会看到 … 播放器的样式会变成我们在皮肤设计器里修改的那样 …

皮肤设计器《 Flowplayer 播放器 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点