Flowplayer>   Playlists

Playlists

This document describes how to configure playlist inside your player so that they are played in sequence. If you are looking for a solution where you want to build your playlis outside the player using HTML skills you can look for this tutorial

Playlists are used to feed several videos into one player instance. Playlists may specify any number of video, image and audio clips.

Specifying a playlist with only one clip is equivalent to specifying the clip in the videoFile variable. Following two are equivalent:

{ playList: [ { url: 'http://flowplayer.org/skiing.flv' } ] }
{ videoFile: 'http://flowplayer.org/skiing.flv' }

The playList format is needed if you want to use the clip specific configuration options.

Below is an example playlist with three video clips and one image in the playlist. This one is configured with absolute URLs. This way the files can be served from completely different Web sites if needed.

  { playList: [
     { url: 'http://www.images.org/clickToPlay.jpg' },
     { url: 'http://flowplayer.org/skiing.mp4' },
     { url: 'http://flowplayer.org/river.mp4' },
     { url: 'http://flowplayer/hacking.mp4' },
     { url: 'http://www.images.org/byebye.jpg' }
     ]
  }
  

You can also define the URLs to contain only the names of the files and apply a baseURL to them. The baseURL, if available, is always prefixed in front of the URL values given within the playlist:

  baseURL: 'http://www.myvideoblog.org',
  playList: [
  	  { url: 'skiing.flv' },
  	  { url: 'river.flv' }
    ]
  }
  

Now the videos would be loaded from:

  • http://www.myvideoblog.org/skiing.flv
  • http://www.myvideoblog.org/river.flv

It is possible to include video, audio and image content in playlists. Video can be in the Flash video format (FLV) or as H.264 encoded video. Flowplayer uses the file extension to recognize the format of the clip: An URL ending with ".flv" is recognized as a FLV file, for example. If your URLs don't follow this convention you can use the clip specific type setting to specify the type

  playList: [
  	  { url: 'http://videosite.org/h264stream', type: 'video' },
  	  { url: 'http://videosite.org/still', type: 'png' }
  	  { url: 'http://audiosite.org/stream2', type: 'mp3' }
    ]
  }
  

The default type is 'video' and it is used if the type cannot be determined from the extension and if it is not explicitly given. The first clip in the above playList could be given without the type:

  	  { url: 'http://videosite.org/h264stream' }
  

It is possible to specify the start and end times for video clips. A nonzero start value can be only used when using a streaming server like the Flash Media Server. With a streaming server the clip is played starting from the time (seconds) given in the start value and ending in end seconds. Refer to the long play section for more information about how to use a streaming server.

  playList: [
  	  { url: 'http://videosite.org/stream1', start: 10, end: 20 },
  	  { url: 'http://videosite.org/stream2', start: 40, end: 50 },
  	  { url: 'http://videosite.org/stream3', duration: 80 },
    ]
  }
  

With the playList above, stream called 'stream1' is played starting at 10 seconds and continuing to 20 seconds, 'stream2' plays from 40 to 50 seconds and 'stream3' plays 80 seconds from start. All these are played as one gapless video when there is a streaming server serving the bits.

By default the player shows a play button triangle in the middle of the video area when it initially shows up. Playback starts when this button (or anywhere in the video ares) is clicked. You can hide this button:

    usePlayOverlay: false
  

Use following if you have several clips in a playList and want to show the play button in the beginning of each clip in the playList:

  playList: [
  	  { url: 'http://videosite.org/h264stream', type: 'video' },
  	  { overlayId: 'play' },
  	  { url: 'http://videosite.org/still', type: 'png' }
  	  { overlayId: 'play' },
  	  { url: 'http://audiosite.org/stream2', type: 'mp3' }
    ]
  }
  

Note that the special overlay clip is not included in front of the first clip. This is because by default it is automatically inserted there unless usePlayOverlay is set to false.