Flowplayer-Skin
SOURCE URL: https://flowplayer.org/docs/skinning.html
Skinning with CSS3
Flowplayer skin design is CSS3. There are 4 approaches
- use the default skins with modifier classes
- override default skins with your own CSS
- clone our default skins and edit them. Our skin repository is in github
- 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
- Download it and put it on your servers. Perhaps combine with other CSS files
- 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 effectaside-time
times will be placed on top/left corner instead of the controlbarcolor-alt
alternate coloringcolor-alt2
alternate coloring #2color-light
uses a dark controlbar. Optimal for light videosno-background
no background colorno-hover
forces all UI elements to be visible ignoring the mouseover eventno-mute
v5.2 hides the mute controlno-time
v5.1 hides the time display, duration or remainingno-volume
v5.1 hides the volume controlplay-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 toggleris-disabled
after the disabled() method was calledis-embedded
while the player is embedded at an external siteis-embedding
while the embedding dialog is visibleis-error
after a player error has occuredis-finished
v5.1 after playback has finished - view demois-flash
while the Flash engine is in use and the OBJECT tag is presentis-fullscreen
while the player is in fullscreen mode; native or notis-help
v5.1 while the help overlay is displayedis-html5
while the HTML5 video engine is in useis-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 houris-loading
while the video is initially loadingis-mouseout
while the controls are hidden - unless the "fixed-controls" modifier class is appliedis-mouseover
while the controls are shownis-muted
while the player is mutedis-paused
while the player is pausedis-playing
while the player is playingis-poster
while the player is in poster stateis-ready
once player and video are completely loadedis-seeking
while the player is seekingis-splash
while the splash screen is visible and awaits a clickis-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 shortcutis-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 demois-splash
enforces a splash setup; JavaScript alternative: splash optionis-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> . </em>seek to previous
</p><p><em>1</em><em>2</em>…<em>6</em> seek to 10%, 20%, …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的更多相关文章
- Flowplayer-Embedding
SOURCE URL:https://flowplayer.org/docs/embedding.html Embedding Video embedding is an act where the ...
- 【官方文档】Nginx模块Nginx-Rtmp-Module学习笔记(三)流式播放Live HLS视频
源码地址:https://github.com/Tinywan/PHP_Experience HTTP Live Streaming(HLS)是由Apple Inc.实施的非常强大的流视频协议.HLS ...
- js网页视频播放: vcastr22 、 flowplayer 、 jwplayer
实例结构: 实例1: demo.html <embed src="vcastr22.swf?vcastr_file=../wujiandao.flv" allowFullSc ...
- 第三十三篇:使用uiresImporter生成uires.idx及skin.xml
在SOUI中,使用uires.idx这个文件来记录程序中使用的所有资源文件. 此外绘制对象(ISkinObj)则一般放在skin.xml中描述. 要向一个界面中增加一个新的图片,在没有uiresImp ...
- Eclipse 启动时提示“发现了以元素'd:skin'开头的无效内容,此处不应含有子元素“
今天打开 Eclipse 时遇到了这个提示,如图所示: 关闭后发现控制台也有提示: [2016-04-19 11:11:20 - Android SDK] Error when loading the ...
- HTML5播放器FlowPlayer的极简风格效果
在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.
- [开发笔记]-flowplayer视频播放插件
最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...
- 越狱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 ...
- 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。
[错误] 打开eclipse报错:发现了以元素 ‘d:skin’ 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\Android-sdks\system-im ...
随机推荐
- 无法分配超出32(XXX)的MINEXTENTS报错的解决方法
今天在创建新表的时候,遇到该报错:ORA-01659 无法分配超出32(XXX)的MINEXTENTS 解决方法:修改表空间大小. 命令如下: ALTER DATABASE DATAFILE ''D: ...
- Java XML解析工具 dom4j介绍及使用实例
Java XML解析工具 dom4j介绍及使用实例 dom4j介绍 dom4j的项目地址:http://sourceforge.net/projects/dom4j/?source=directory ...
- rados命令
chen@admin-node:/etc/ceph$ rados --help usage: rados [options] [commands] POOL COMMANDS lspools list ...
- CentOS 6.6 安装 PHP Memcached 扩展
PHP 的 Memcached扩展使用了 libmemcached 库提供的 api 与 memcached 服务端进行交互.它同样提供了一个 session 处理器(memcached). PHP ...
- Xcode离线安装帮助文档
Xcode离线安装帮助文档 1.在线查看帮助文件:Xcode下查看帮助文件,菜单Help-Developer Documentation在右上角搜索框中即可检索,但速度很慢,在线查看. 2.下载帮 ...
- MySQL 的 utf8_general_ci 和 utf8_unicode_ci 有什么区别,应如何选择?
一般的解说是 utf8_general_ci 速度较快,utf8_unicode_ci 准确性较好 … 但快在那里,又好在什么地方呢? 首先就其准确性说,这世界上有无数种文字,除了通用的英文使用我们较 ...
- LeetCode Zigzag Iterator
原题链接在这里:https://leetcode.com/problems/zigzag-iterator/ 题目: Given two 1d vectors, implement an iterat ...
- 两种方法解决tomcat的 Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"]
出现这种原因主要是8080端口被占用了. 解决1: 打开任务管理器看看里面有没有javaw的线程,把它关了再重新启动tomcat看看. 解决2: 修改tomcat /conf /server.xml ...
- magento -- 解决magento错误:ERROR: Base table or view already exists: 1050 Table ... already exists
相信有更新magento或者,备份转移magento站点的时候可能会碰到类似这样的错误提示: Base table or view already exists: 1050 Table ... alr ...
- 配置安卓运行环境/安卓sdk
收藏一个网站 http://www.php100.com/html/webkaifa/Android/de_news/2013/0221/12082.html