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. 您的服务器没有安装这个PHP扩展:OpenSSL(其他平台API同步需要)

    今天在安装一个博客系统的时候提示这个错,在网上找了半天,自己慢慢弄出来的,具体如下: 1.找到你的php.ini 文件,将“;extension=php_openssl.dll”前面分号去掉. 2.复 ...

  2. 自动删除Mysql备份(数组+for)

    #!/bin/bash #author:V #Dispaly:auto delete mysql backup. BACKDIR=(/home/11/mysqlbackup/ /home/full/) ...

  3. linux中添加ftp用户,并设置相应的权限

    在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建用户:在root用户下: useradd ...

  4. BizTalk开发系列(十七) 信封架构(Envelop)

    在BizTalk开过中使用信封架构可以提高BizTalk处理性能.比如在使用SQL Adapter时使用信封选取多条记录在通过管道的XML拆装器时将信封里的XML消息部分拆分为单独的消息,发布到Mes ...

  5. php课程---面向对象

    面向对象:一:定义类 class Dog { var $name; var $age; var $pinzhong; function Jiao() { echo "{$this->n ...

  6. Kafka - protocol

    http://kafka.apache.org/protocol   具体的协议看原文,   Preliminaries Network Kafka uses a binary protocol ov ...

  7. rabbitmq之消息生命周期

    参考:http://jzhihui.iteye.com/blog/1567232

  8. 函数类型+WINAPI+函数名(例如inline DWORD static WINAPI RecordToKeys(const DRWT& theDRWT,WTSBH* pKey,DWORD dwMaxNum)

    winapi标识符在WINDEF.H定义,语句如下: #define winapi __stdcall 让我们说说这个__stdcall stdcall调用约定 stdcall很多时候被称为pasca ...

  9. 微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器

    微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 预览 ...

  10. Comet 反Ajax: jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...