User Tools

Site Tools


playlists

Using Playlists

General (for developers)

Projekktor has a built in playlist support. You may want to ignore this and - if required - feel free to handle all the schedule stuff via the JS API. That´s OK and the possibilities are legion. Basically its all about fetching the “COMPLETED” state of the playback component and re-instantiate a new Projekktor with new media URLs afterwards. This is common practice (with other products) and will work fine. However you may find Projekktor itself a bit bloated then because you will not need about two-thirds of its functionality.

As such it works best to use the player as central data handler and - if necessary - write plugins or wrappers to do the custom stuff. What ever you do, may the force be with you.

General (for webmasters)

In fact you have three options to pump schedule data into the player core:

  • via the config object
  • via javascript API calls
  • via asynchronously loaded XML or JSON feeds

It is hard to make a recommendation which option works best since all three are the result of daily practice. If you just want to apply a pre- or post- roll ad the first option would work best because it keeps fragmentation of your code and mark-up low. On the other hand using feeds is the perfect way to go for video-focused sites with only a few central players (e.g. webTV). So it´s all up to you.

Projekktor Playlist Format

A Projekktor playlist is an array holding multiple objects where each object configures a single media item in the matter of its location (URL), type and optional item specific parameters.

[
  {
     // minimum 
     0:{src:'item_one_format_one.ext', type: 'video/...'}     
  },
  {
     // one content, multiple formats
     0:{src:'item_two_format_one.ext', type: 'video/...'},
     1:{src:'item_two_format_two.ext', type: 'video/...'}
  },
  {
     // one content, multiple formats, item specific config
     0:{src:'item_three_format_one.ext', type: 'video/...'},
     1:{src:'item_three_format_two.ext', type: 'video/...'},
     3:{src:'item_three_format_three.ext', type: 'video/...'},
     4:{src:'item_three_format_four.ext', type: 'video/...'},          
     config: {
        option1: value1,
        option2: value2
     }
     
]          

Basic Playlist / Schedule Setup

As you might already know the player is instantiated this way (btw: in case you do not, learn more here):

<div id="player_a" class="mybasicplayerstyle"></div>

<script type="text/javascript">
    projekktor('#player_a', {});
</script>

Parameter one is a jQuery DOM selector and indicates the destination DOM container(s), the second parameter is for additional configuration. E.g. in order to play a single content in two formats, having controls enabled and set the volume to 50% you hack this:

projekktor('#player_a', {
    controls: true,
    volume: 0.5,
    playlist: [
       {
          0:{src:'myvideo.mp4', type: 'video/mp4'},
          1:{src:'myvideo.ogv', type: 'video/ogv'}
       }
    ]
});

Consistently it is possible to schedule multiple videos by extending the playlist array. Let ´s add a kind of preroll-ad:

projekktor('#player_a', {
    controls: true,
    volume: 0.5,
    playlist: [
       {
          0:{src:'advertisement.mp4', type: 'video/mp4'},
          1:{src:'advertisement.ogv', type: 'video/ogv'}
       },
       {
          0:{src:'myvideo.mp4', type: 'video/mp4'},
          1:{src:'myvideo.ogv', type: 'video/ogv'}
       }       
    ]
});

You now have two videos in schedule which are played back one after one in a row. While this is quite cool it is not perfect yet. In general ads are enervating and users have tendencies to skip them when ever possible. To avoid this you may want to make use of Projekktor´s item-wise re-configuration feature.

In order to prevent skipping and pausing of the first clip you can set config.disablePause and config.disallowSkip to TRUE like this:

projekktor('#player_a', {
    controls: true,
    volume: 0.5,
    playlist: [
       {
          0:{src:'advertisement.mp4', type: 'video/mp4'},
          1:{src:'advertisement.ogv', type: 'video/ogv'},
          config: {
             disablePause: true,
             disallowSkip: true
          }
       },
       {
          0:{src:'myvideo.mp4', type: 'video/mp4'},
          1:{src:'myvideo.ogv', type: 'video/ogv'}
       }       
    ]
});

Et voila: Perfect constraint!

Note that configuration options above “playlist” define the defaults for all scheduled items while config options on item level affect only the respective item.

Dynamic Scheduling via Javascript API

Assumed you set a player up and running this way (learn more here):

<div id="player_a" class="mybasicplayerstyle"></div>

<script type="text/javascript">
projekktor('#player_a', {
    controls: true,
    volume: 0.5
});
</script>

It is possible to set (or overwrite) its schedule by using the setFile or setItem method. Below we define a new playlist and apply it to an already instantiated player with the ID “player_a”:

var playlist = [
       {
          0:{src:'advertisement.mp4', type: 'video/mp4'},
          1:{src:'advertisement.ogv', type: 'video/ogv'},
          config: {
             disablePause: true,
             disallowSkip: true
          }
       },
       {
          0:{src:'myvideo.mp4', type: 'video/mp4'},
          1:{src:'myvideo.ogv', type: 'video/ogv'}
       }   
];

projekktor('player_a').setFile(playlist);

The player instance will fire the “scheduled” event once the setFile-call has been processed. Note that ”setFile” overwrites all previously set items - which is close to a full reset. If you want to manipulate, add or remove single items without discarding the current schedule you better use the setItem method.

Asynchronously loaded Playlist Feeds

Loading feeds will not work if you´re testing / developing through the file system. Files MUST be delivered by a HTTP server sending proper content-type header information.

Projekktor can eat XML and JSON formatted playlist feeds either of a proprietary format or any other format by applying custom filter functions. If you´re planing a project from scratch and want to use the Projekktor we highly recommend to use JSON feeds in order to save overhead and performance.

Feeds are applied like ordinary media files just by a given URL and a type set either to “text/json” to load a JSON formatted feed or “text/xml” to load - guess what - a feed which is handled as XML. As such the following example could do the job:

<div id="player_g"></div>

<script>
projekktor('#player_g', {
    file: [{src:'playlistserver.php', type: 'text/json'}]
});
</script>

The following will work also:

<video id="player_g" width="640" height="480" controls>
   <source src="playlistserver.php" type="text/json"/>
</video>

<script>
projekktor('#player_g', {});
</script>

Make sure you´ve a proper CORS setup in case you want to load XML and JSON feeds across different domains. Alternatively you use JSONP formatted feeds (set type to “application/jsonp” then).

During the load process the player will go to IDLE state and will refuse any user interaction or JS call until all feed data has been processed and all plugins (re-) initialized.

Loading a (new) feed will ALWAYS overwrite all scheduled items so far. This is important to know because it is possible to “chain” playlists. Once the player reaches an item of type “application/json”, “application/xml” or “application/jsonp” it will load the feed from the given URL and continues playback with item #1 of the new scheduled items.

The following example will play back the advertisement.*-video first and load the playlist.xml feed afterwards:

projekktor('#player_a', {
    controls: true,
    volume: 0.5,
    playlist: [
       {
          0:{src:'advertisement.mp4', type: 'video/mp4'},
          1:{src:'advertisement.ogv', type: 'video/ogv'}
       },
       {
          0:{src:'playlist.xml', type: 'text/xml'}
       }       
    ]
});

Icing on the cake: data types are “always functional” fallback options. Read on:

You can set up extremely complex format fallback scenarios by providing feeds as alternate media sources. Because feeds are understood by all browsers even setting like this will work:

projekktor('#player_a', {
    controls: true,
    volume: 0.5,
    playlist: [
       {
          0:{src:'advertisement.webm', type: 'video/webm'},
          1:{src:'alternate-playist.xml', type: 'text/xml'}
       }       
    ]
});

In this example every client which is not able to play WEBM will load the “alternate-playist.xml” feed.

playlists.txt · Last modified: 2013/11/06 21:35 by operator