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 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 thertmp configuration option is automatically associated with video sources of type flash.