SOURCE URL: https://flowplayer.org/docs/playlist.html
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>
.fp-playlist. A user without JavaScript support can
still see the videos by clicking on the link.next, prev and
play(index) methods are available from the API.
Additionally the index and is_last properties are
available from the video
object.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 /
}
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>
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 |
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.
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,布布扣,bubuko.com
原文：http://www.cnblogs.com/seesky/p/3659054.html