SOURCE URL: https://flowplayer.org/docs/skinning.html

Skinning with CSS3

Flowplayer skin design is CSS3. There are 4 approaches

  1. use the default skins with modifier classes
  2. override default skins with your own CSS
  3. clone our default skins and edit them. Our skin repository is in github
  4. write a skin from scratch

Typically you use the combination of 1 and 2.

Default skins

  • Minimalist //releases.flowplayer.org/5.4.6/skin/minimalist.css
  • Functional //releases.flowplayer.org/5.4.6/skin/functional.css
  • Playful //releases.flowplayer.org/5.4.6/skin/playful.css

They look like this. To use a skin you can

  1. Download it and put it on your servers. Perhaps combine with other CSS files
  2. Reference it directly using the CDN URLs (Amazon CloudFront) shown above

We also provide a combined version with all skins. You can switch the skin with a CSS class name

<div class="flowplayer functional">
<video>
<source type="video/webm" src="http://mydomain.com/my/video.webm">
<source type="video/mp4" src="http://mydomain.com/my/video.mp4">
</video>
</div>

This combined file is obviously a larger download so it's recommended to pick the one you like.

The default skins use node.js based Stylus to make CSS easier. Go ahead and play with the skins and please contact us if you have a good idea for a new skin! Check our email addresses from Github.

Right to left support

v5.4 Flowplayer inherently supports right-to-left layouts. On pages which have set RTL direction globally:

body {
direction: rtl;
}

Flowplayer will automatically do the right thing and become a right to left video player.

Of course you can also set up Flowplayer in the opposite direction of the body. The following CSS directives will result in left to right players on a right to left page:

body {
direction: rtl;
}
.flowplayer {
direction: ltr;
}

Modifier classes

Modifier classes are a simple way to alter the looks and/or behaviour of a skin. For example:

<div class="fixed-controls color-alt no-background">
<video>
<source type="video/webm" src="http://mydomain.com/my/video.webm">
<source type="video/mp4" src="http://mydomain.com/my/video.mp4">
</video>
</div>
  • fixed-controls controlbar is statically placed below the video. no mouseover effect
  • aside-time times will be placed on top/left corner instead of the controlbar
  • color-alt alternate coloring
  • color-alt2 alternate coloring #2
  • color-light uses a dark controlbar. Optimal for light videos
  • no-background no background color
  • no-hover forces all UI elements to be visible ignoring the mouseover event
  • no-mute v5.2 hides the mute control
  • no-time v5.1 hides the time display, duration or remaining
  • no-volume v5.1 hides the volume control
  • play-button v5.3 display play button on the controlbar

You can see these modifier classes in action on our test suite.

Note: individual elements can be removed from a player with simple display: none setting. For example, to disable embedding you can do:

.fp-embed {
display: none
}

States

The player can be in various states during playback, and for each state there is a CSS class name which is added or removed according to the current state. For example:

<div class="is-ready is-paused">
<video>
<source type="video/webm" src="http://mydomain.com/my/video.webm">
</video>
</div>

As you can specify CSS directives for these states you gain a powerful tool to skin the player and the descendant elements dynamically during the lifetime of a player. Most of our demos are just CSS "programming". This is where Flowplayer excels as a truly HTML-based video player: concept and design evolve smoothly from the core structure of the underlying markup language.

These classes are in use no matter whether you are using a default or custom skin. By convention all state class names start with an "is-" prefix.

  • is-closeable a close/unload button replaces the fullscreen toggler
  • is-disabled after the disabled() method was called
  • is-embedded while the player is embedded at an external site
  • is-embedding while the embedding dialog is visible
  • is-error after a player error has occured
  • is-finished v5.1 after playback has finished - view demo
  • is-flash while the Flash engine is in use and the OBJECT tag is present
  • is-fullscreen while the player is in fullscreen mode; native or not
  • is-help v5.1 while the help overlay is displayed
  • is-html5 while the HTML5 video engine is in use
  • is-live v5.4.4 when the player is set up to play a live stream (experimental)
  • is-long v5.3 when the video duration exceeds than 1 hour
  • is-loading while the video is initially loading
  • is-mouseout while the controls are hidden - unless the "fixed-controls" modifier class is applied
  • is-mouseover while the controls are shown
  • is-muted while the player is muted
  • is-paused while the player is paused
  • is-playing while the player is playing
  • is-poster while the player is in poster state
  • is-ready once player and video are completely loaded
  • is-seeking while the player is seeking
  • is-splash while the splash screen is visible and awaits a click
  • is-touch v5.4 when the device supports touch controls

CSS programming example

Let's assume you do not want to show the minimal timeline below the player while the mouse is outside the player area. You could achieve this with JavaScript in a global api instruction:

flowplayer(function (api, root) {
root.hover(function () {
$(".fp-timeline", root).css({
height: /enter/.test(e.type) ? 10 : 0
});
});
});

Or you can simply tweak the CSS height directive for the timeline in the is-mouseout state class from 4px to 0:

.flowplayer.is-mouseout .fp-timeline {
height: 0;
}

View the demo.

Configurable states

The following of the above state classes can be specified by the user at installation time in the same way as modifier classes. Accordingly they also affect the player behaviour and user experience. They work like configuration options, and indeed adding the is-splash class to the container element has the same effect as setting splash: true in the JavaScript configuration.

  • is-closeable the player can be unloaded via a close button - fullscreen mode can only be toggled via the "f" keyboard shortcut
  • is-live v5.4.4 tells the player that it will play back a live stream, controls specific to video on demand are not shown; JavaScript alternative: live option - view demo
  • is-splash enforces a splash setup; JavaScript alternative: splash option
  • is-mouseover makes the UI elements initially visible

HTML layout

Here is the HTML layout rendered by the player. All elements inside the root are prefixed with "fp-" to avoid name collisions

<!-- player root -->
<div class="flowplayer"> <!--
A magic element that specifies the aspect ratio on different screen sizes
http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
-->
<div class="fp-ratio" style="padding-top:41.7%"></div> <!-- video or object tag depending on browser support (here it's just DIV) -->
<div class="fp-engine"></div> <!-- user interface -->
<div class="fp-ui"> <!-- progress indicator -->
<div class="fp-waiting"><em></em><em></em><em></em></div> <!-- buttons -->
<a class="fp-fullscreen"></a>
<a class="fp-unload"></a> <!-- timeline and volume. nested inside controls -->
<div class="fp-controls"> <!-- play button disabled by default, enable with play-button modifier class -->
<a class="fp-play"></a> <div class="fp-timeline">
<div class="fp-buffer" style="width: 70%;"></div>
<div class="fp-progress" style="width: 35%;"><em></em></div>
</div> <div class="fp-volume">
<a class="fp-mute"></a>
<div class="fp-volumeslider">
<div class="fp-volumelevel" style="width: 50%;"><em></em></div>
</div>
</div> </div> <!-- time -->
<div class="fp-time">
<em class="fp-elapsed">00:00</em>
<em class="fp-remaining">-00:44</em>
<em class="fp-duration">01:44</em>
</div> <!-- error message -->
<div class="fp-message">
<h2>Invalid URL</h2>
<p>http://invalid.url/com/my-video.mp4</p>
</div> <!-- embedding -->
<a class="fp-embed" title="Copy to your site"></a> <div class="fp-embed-code">
<label>Paste this HTML code to your site.</label>
<textarea>
<!-- actual content on textarea -->
<script src="//releases.flowplayer.org/5.4.6/embed.js">...</script>
</textarea>
</div> </div> <!-- help overlay -->
<div class="fp-help">
<a class="fp-close"></a>
<div class="fp-help-section fp-help-basics">
<p><em>space</em>play / pause</p>
<p><em>esc</em>stop</p>
<p><em>f</em>fullscreen</p>
<p><em>shift</em> + <em>←</em><em>→</em>slower / faster</p>
</div>
<div class="fp-help-section">
<p><em>↑</em><em>↓</em>volume</p>
<p><em>m</em>mute</p>
</div>
<div class="fp-help-section">
<p><em>←</em><em>→</em>seek</p>
<p><em>&nbsp;. </em>seek to previous
</p><p><em>1</em><em>2</em>&hellip;<em>6</em> seek to 10%, 20%, &hellip;60% </p>
</div>
</div> <!-- logo (hidden logic in javascript / flash) -->
<a class="fp-logo" href="http://flowplayer.org" target="_top">
<img src="//d32wqyuo10o653.cloudfront.net/logo.png" />
</a> <!-- subtitles -->
<div class="fp-subtitle">
<p>This is the first line</p><br/>
<p>And the second one.</p>
</div> <!-- any custom HTML goes here --> </div>

Whether you are using the default skins or building your own from scratch Flowplayer skinning is all about writing CSS for the layout shown above and taking advantage of the modifier classes and player states.

When "fp-time" element is clicked a "is-inverted" class name is toggled on that element. With the default skins this is used to toggle visibility between "fp-duration" and "fp-remaining" elements.

Custom UI elements

You can add your own UI elements to the player area. To be operational - e.g. clickable - they must be stacked on top of the Flowplayer UI in the z-axis. As the Flowplayer UI has a z-index of 1 you have to pass a z-index CSS directive of at least 2 to those elements. This also applies to added elements interfacing existing Flowplayer functionality or extensions. For instance you can display the 'previous' and 'next' playlist controls in the player area like in this demo.

Similarly any interactive overlayed element must be stacked on top accordingly, for instance if cuepoints should be clickable links as shown here.

Context menu

v5.4.4 For commercial setups, a custom context menu can be added by inserting the following html inside the player container:

<div class="fp-context-menu">
<ul>
<li><a href="#">First menu item</a></li>
<li><a href="#">Second menu item</a></li>
</ul>
</div>

An example of this customization is shown in the complete commercial setup demo.

Flowplayer-Skin的更多相关文章

  1. Flowplayer-Embedding

    SOURCE URL:https://flowplayer.org/docs/embedding.html Embedding Video embedding is an act where the ...

  2. 【官方文档】Nginx模块Nginx-Rtmp-Module学习笔记(三)流式播放Live HLS视频

    源码地址:https://github.com/Tinywan/PHP_Experience HTTP Live Streaming(HLS)是由Apple Inc.实施的非常强大的流视频协议.HLS ...

  3. js网页视频播放: vcastr22 、 flowplayer 、 jwplayer

    实例结构: 实例1: demo.html <embed src="vcastr22.swf?vcastr_file=../wujiandao.flv" allowFullSc ...

  4. 第三十三篇:使用uiresImporter生成uires.idx及skin.xml

    在SOUI中,使用uires.idx这个文件来记录程序中使用的所有资源文件. 此外绘制对象(ISkinObj)则一般放在skin.xml中描述. 要向一个界面中增加一个新的图片,在没有uiresImp ...

  5. Eclipse 启动时提示“发现了以元素'd:skin'开头的无效内容,此处不应含有子元素“

    今天打开 Eclipse 时遇到了这个提示,如图所示: 关闭后发现控制台也有提示: [2016-04-19 11:11:20 - Android SDK] Error when loading the ...

  6. HTML5播放器FlowPlayer的极简风格效果

    在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.

  7. [开发笔记]-flowplayer视频播放插件

    最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...

  8. 越狱Season 1-Episode 15: By the Skin and the Teeth

    Season 1, Episode 15: By the Skin and the Teeth -Pope: doctor...you can leave. 医生你得离开 -Burrows: It's ...

  9. 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。

    [错误] 打开eclipse报错:发现了以元素 ‘d:skin’ 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\Android-sdks\system-im ...

随机推荐

  1. 无法分配超出32(XXX)的MINEXTENTS报错的解决方法

    今天在创建新表的时候,遇到该报错:ORA-01659 无法分配超出32(XXX)的MINEXTENTS 解决方法:修改表空间大小. 命令如下: ALTER DATABASE DATAFILE ''D: ...

  2. Java XML解析工具 dom4j介绍及使用实例

    Java XML解析工具 dom4j介绍及使用实例 dom4j介绍 dom4j的项目地址:http://sourceforge.net/projects/dom4j/?source=directory ...

  3. rados命令

    chen@admin-node:/etc/ceph$ rados --help usage: rados [options] [commands] POOL COMMANDS lspools list ...

  4. CentOS 6.6 安装 PHP Memcached 扩展

    PHP 的 Memcached扩展使用了 libmemcached 库提供的 api 与 memcached 服务端进行交互.它同样提供了一个 session 处理器(memcached). PHP ...

  5. Xcode离线安装帮助文档

    Xcode离线安装帮助文档   1.在线查看帮助文件:Xcode下查看帮助文件,菜单Help-Developer Documentation在右上角搜索框中即可检索,但速度很慢,在线查看. 2.下载帮 ...

  6. MySQL 的 utf8_general_ci 和 utf8_unicode_ci 有什么区别,应如何选择?

    一般的解说是 utf8_general_ci 速度较快,utf8_unicode_ci 准确性较好 … 但快在那里,又好在什么地方呢? 首先就其准确性说,这世界上有无数种文字,除了通用的英文使用我们较 ...

  7. LeetCode Zigzag Iterator

    原题链接在这里:https://leetcode.com/problems/zigzag-iterator/ 题目: Given two 1d vectors, implement an iterat ...

  8. 两种方法解决tomcat的 Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"]

    出现这种原因主要是8080端口被占用了. 解决1: 打开任务管理器看看里面有没有javaw的线程,把它关了再重新启动tomcat看看. 解决2: 修改tomcat /conf /server.xml ...

  9. magento -- 解决magento错误:ERROR: Base table or view already exists: 1050 Table ... already exists

    相信有更新magento或者,备份转移magento站点的时候可能会碰到类似这样的错误提示: Base table or view already exists: 1050 Table ... alr ...

  10. 配置安卓运行环境/安卓sdk

    收藏一个网站 http://www.php100.com/html/webkaifa/Android/de_news/2013/0221/12082.html