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 ...
随机推荐
- centos MariaDB10.1.X galera cluster
[mariadb] name = MariaDB baseurl = http://yum.mariadb.org/10.1.12/centos6-amd64 gpgkey=https://yum.m ...
- 阶乘之和--nyoj91
描述 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为正数)的阶乘之和,如9=1!+2!+3!,如果是,则输出Yes,否则输出No: 输入 第一行有一个整数0<m<10 ...
- BizTalk动手实验(一)安装BizTalk Server 2010开发环境
1 课程简介 通过本课程了解BizTalk 2010的软依赖及基本的安装配置步骤,BizTalk相应的解决方案及高可用性方案可在课程的基础进行深入学习. 2 准备工作 硬件环境:CPU >2.0 ...
- mysql5.5手册读书日记(3)
<?php /* MySQL_5.5中文参考手册 587开始 与GROUP BY子句同时使用的函数和修改程序 12.10.1. GROUP BY(聚合)函数 12.10.2. GROUP BY修 ...
- velocity.js用法整理1
velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute; top:0; 现在让A元素用JQ的animate,B用velocit ...
- hover事件优化(延时操作)
JQ的hover事件拓展 编写原因:当鼠标滑过某个带有hover事件的元素,但是仅仅是路过,并不是希望查看此部分内容的时候,效果不理想 $.fn.extend({ delayed : function ...
- GDC2016 [全境封锁],11个种类5个派系的敌人设计思路
[汤姆克兰西:全境封锁],11个种类5个派系的敌人设计思路 实现[汤姆克兰西]射击RPG的AI开发 日文链接:http://game.watch.impress.co.jp/docs/news/2 ...
- GDC2016 执着于光影表现的【全境封锁】的开放世界渲染
执着于光影表现[全境封锁]的开放世界渲染 Snowdrop(雪莲花)引擎的全局照明技术介绍 补上原文链接:http://game.watch.impress.co.jp/docs/news/201 ...
- 【转】发布一个基于NGUI编写的UI框架
发布一个基于NGUI编写的UI框架 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面 ...
- 基于TCP/IP的长连接和短连接
1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次 ...