Flowplayer-playlist
15924 ワード
SOURCE URL: https://flowplayer.org/docs/playlist.html
Here is a typical setup for a playlist for a html based playlist:
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 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
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
You can for example show/hide HTML inside the player based on which clip is being played.
v5.1 A convenience class
Anchors with "fp-prev"and "fp-next"class names will move forward and backward on the playlist. For example
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:
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
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.
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.
Once the list of videos is set up, the player can be initialized with a simple call to
Please note how the net connection URL provided by the
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>
.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 . 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 the
rtmp
configuration option is automatically associated with video sources of type flash
.