皮肤 - 播放器的外观

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

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 类 …

皮肤 - 播放器的外观《 Flowplayer 播放器 》

统计

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

社会化网络

关于

微信订阅号

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