Flowplayer-playlist
SOURCE URL: https://flowplayer.org/docs/playlist.html
HTML layout
Here is a typical setup for a playlist for a html based playlist:
<div class="flowplayer">
<!-- initial clip -->
<video>
<source type="video/webm" src="http://mydomain.com/night1/640x360.webm">
<source type="video/mp4" src="http://mydomain.com/night1/640x360.mp4">
<source type="video/ogg" src="http://mydomain.com/night1/640x360.ogv">
</video>
<!-- playlist root -->
<div class="fp-playlist">
<!-- playlist entries so. "trigger" elements -->
<a href="http://mydomain.com/night1/640x360.mp4"></a>
<a href="http://mydomain.com/night2/640x360.mp4"></a>
<a href="http://mydomain.com/night3/640x360.mp4"></a>
<a href="http://mydomain.com/night4/640x360.mp4"></a>
</div>
</div>
- The initial clip is configured with multiple formats (webm, mp4, ogv). The playlist assumes that all playlist entries are delivered via HTTP and have the same formats available and obey to the same filename and filename suffix naming scheme. If the entries cannot follow a consistent naming scheme or the videos are delivered via RTMP for the Flash engine you must set up the playlist via JavaScript.
- The playlist is nested inside the player so you can style it differently depending on the player state.
- By default the playlist entries are anchor tags inside a tag with CSS class name
.fp-playlist
. A user without JavaScript support can still see the videos by clicking on the link. - You can use autoplay or a splash setup just like when you are not using a playlist.
- If Analytics is enabled each video is tracked separately.
- You can have several playlists on one page.
- When a playlist is configured the
next
,prev
andplay(index)
methods are available from the API. Additionally theindex
andis_last
properties are available from the video object.
CSS classes
A "video{clip_index}" CSS class name will be assigned to the root element and a "is-active" CSS class is given to the currently active trigger. For example
<div class="flowplayer video1">
<div class="fp-playlist">
<a href="http://mydomain.com/video1.mp4"></a>
<a href="http://mydomain.com/video2.mp4" class="is-active"></a>
<a href="http://mydomain.com/video3.mp4"></a>
<a href="http://mydomain.com/video4.mp4"></a>
</div>
</div>
You can for example show/hide HTML inside the player based on which clip is being played.
.flowplayer.video1 .info1 {
display: block;
}
v5.1 A convenience class last-video
represents the last clip. For example
.last-video.is-finished {
/ do your marketing magic /
}
Next and prev links
Anchors with "fp-prev" and "fp-next" class names will move forward and backward on the playlist. For example
<div class="flowplayer">
<video>
<source type="video/webm" src="http://mydomain.com/my-video.webm">
<source type="video/mp4" src="http://mydomain.com/my-video.mp4">
</video>
<a class="fp-prev">prev</a>
<a class="fp-next">next</a>
<div class="fp-playlist">
<a href="http://mydomain.com/my-video.mp4"></a>
...
</div>
</div>
Configuration
The playlist behaviour is configured at the top level of the configuration object. The following options are available:
option | default value | description |
active | "is-active" | CSS class name for the trigger element |
advance | True | seek to next clip when previous one is finished and stop when last clip ends |
loop | True | v5.1 continue from the first clip when last clip ends. Overrides the clip specific loop variable |
query | ".fp-playlist a" | jQuery selector for trigger elements |
Clip specific cuepoints
v5.1 You can have a separate set of cuepoints for each clip of a playlist. For example:
<div class="flowplayer">
<video>
<source type="video/webm" src="http://mydomain.com/night1/640x360.webm">
<source type="video/mp4" src="http://mydomain.com/night1/640x360.mp4">
</video>
<div class="fp-playlist">
<a href="http://mydomain.com/night1/640x360.mp4" data-cuepoints="[0.5, 1]"></a>
<a href="http://mydomain.com/night2/640x360.mp4" data-cuepoints="[0.9, 1.5]"></a>
<a href="http://mydomain.com/night3/640x360.mp4"></a>
</div>
</div>
Note: Clip specific cuepoints discard all cuepoints set globally for the player. If you want to have cuepoints common to all clips in a playlist while specifying individual ones, you must repeat the common cuepoints for every clip's data-cuepoints
.
Javascript playlists
v5.4 Flowplayer allows playlists to be configured completely using javascript. This allows dynamic scenarios where the playlist needs to be retrieved by an API call to be implemented without any DOM manipulation.
This also allows for a minimal HTML structure for the player.
<div id="jsplaylist"></div>
Please take a look at our javascript playlist demo for a complete implementation. Abbreviated snippets from that demo are used here as examples.
The playlist is provided as an array of video sources. A video source can either be key-value pair of type and url or simply an URL.
var allVideos = [
[
{webm: "http://stream.flowplayer.org/night7/640x360.webm"},
{mp4: "http://stream.flowplayer.org/night7/640x360.mp4"},
{ogg: "http://stream.flowplayer.org/night7/640x360.ogv"},
{flash: "mp4:night7/640x360"}
],
[
{webm: "http://stream.flowplayer.org/night5/640x360.webm"},
{mp4: "http://stream.flowplayer.org/night5/640x360.mp4"},
{ogg: "http://stream.flowplayer.org/night5/640x360.ogv"},
{flash: "mp4:night5/640x360"}
],
[
{webm: "http://stream.flowplayer.org/night6/640x360.webm"},
{mp4: "http://stream.flowplayer.org/night6/640x360.mp4"},
{ogg: "http://stream.flowplayer.org/night6/640x360.ogv"},
{flash: "mp4:night6/640x360"}
],
[
{webm: "http://stream.flowplayer.org/night4/640x360.webm"},
{mp4: "http://stream.flowplayer.org/night4/640x360.mp4"},
{ogg: "http://stream.flowplayer.org/night4/640x360.ogv"},
{flash: "mp4:night4/640x360"}
]
];
Once the list of videos is set up, the player can be initialized with a simple call to flowplayer()
.
$("#jsplaylist").flowplayer({
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
playlist: allVideos
});
Please note how the net connection URL provided by thertmp
configuration option is automatically associated with video sources of type flash
.
Flowplayer-playlist的更多相关文章
- FlowPlayer 参数说明
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> & ...
- js网页视频播放: vcastr22 、 flowplayer 、 jwplayer
实例结构: 实例1: demo.html <embed src="vcastr22.swf?vcastr_file=../wujiandao.flv" allowFullSc ...
- CF 268E Playlist(贪心)
题目链接: 传送门 Playlist time limit per test:1 second memory limit per test:256 megabytes Description ...
- HTML5播放器FlowPlayer的极简风格效果
在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.
- [开发笔记]-flowplayer视频播放插件
最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...
- Codeforces Round #164 (Div. 2) E. Playlist 贪心+概率dp
题目链接: http://codeforces.com/problemset/problem/268/E E. Playlist time limit per test 1 secondmemory ...
- flowplayer+flashhls使用过程中发现的一些小问题
flashls里边有好几套代码,主要看生成路径,其中flowplayer用了flashls.swc,flashls.swc使用的代码在这里:/src/org/mangui/hls,所以要注意,当搜索代 ...
- 兼容各个浏览器的H.264播放: H.264+HTML5+FLOWPLAYER+WOWZA+RMTP
一.方案确定 计划做视频播放,要求可以播放H264编码的mp4文件,各个浏览器,各种终端都能播放. 首先查找可行性方案, http://www.cnblogs.com/sink_cup/archive ...
- flowplayer视频播放插件
flowplayer视频播放插件 最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. f ...
- C. Playlist Educational Codeforces Round 62 (Rated for Div. 2) 贪心+优先队列
C. Playlist time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
随机推荐
- 使用logrotate来进行轮换mysql的慢日志
#!/bin/bash SLOWCFG=/etc/my.cnf DATADIR=`awk /^datadir/ $SLOWCFG|awk -F"=" '{print $2}'` S ...
- 将Excel数据导入mysql数据库的几种方法
将Excel数据导入mysql数据库的几种方法 “我的面试感悟”有奖征文大赛结果揭晓! 前几天需要将Excel表格中的数据导入到mysql数据库中,在网上查了半天,研究了半天,总结出以下几种方法,下面 ...
- Java XML解析工具 dom4j介绍及使用实例
Java XML解析工具 dom4j介绍及使用实例 dom4j介绍 dom4j的项目地址:http://sourceforge.net/projects/dom4j/?source=directory ...
- JavaScript入门篇 编程练习
编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...
- TestNG的一个不足之处
PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...
- LinkedBlockingQueue的put,add跟offer的区别
LinkedBlockingQueue的put,add和offer的区别 最近在学习<<Java并发编程实践>>,有很多java.util.concurrent包下的新类.Li ...
- 使用apache.lang包安全简洁地操作Java时间
引言 最近偶遇apache开发的工作java工具包,一使用,就发现自己爱上它了.不多说了,下面介绍org.apache.commons.lang3.time包中处理java程序员为之头疼的时间的类. ...
- 启动Hive报错
Exception in thread "main" java.lang.RuntimeException: Hive metastore database is not init ...
- UIBarButtonItem的创建
1. rightBarButtonItem的创建 -(void)initRightBar{ UIBarButtonItem *done =[UIBarButtonItem rightItemWithT ...
- 百度地图API-自定义图标覆盖物
地图覆盖物 Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法. Marker:标注表示地图上的点,可自定义标注的图标. Label:表示地图上的文本标注,您可以自定义标注的文本内容. P ...