Documentation

Projekktor plug-ins are (optional) components extending the basic player´s functionality, behavior and / or look. They can be applied to one, more or all player instances and at any time during player instantiation. All Projekktor plug-ins consist of at least one Javascript file and sometimes an additional CSS featuring a basic demo-style. Some plug-ins require additional HTML markup either within the page or the player itself.

Plugins have unique, single word names, e.g. “share”, “related”. The plugin files are named accordingly following this namescheme: projekktor.<plugin name>.<extention>, e.g. “projekktor.share.js”, “projekktor.share.css” etc. pp.

To activate a plugin all *.JS and *.CSS files coming with the plugin-archive must be correctly included into the page in question and possibly required HTML markups must be copy and pasted from an existing projekktor.<pluginname>.html - file into the player´s DOM or the page´s body.

Additionally the player has to learn which plugin(s) should be fired with events. To do so the plugin´s name must be added to the “addplugins”-config array, e.g. to activate the “related” plugin you hack :

var player = projekktor('#player_a', {
   controls: true,
   autoplay: false,
   addplugins: ['related'],
   playlist: [   
      {
         0: {src:'demovideo.mp4', type:"video/mp4"},
      }
   ]
});

The plugin´s name is also relevant to address plugin specific configuration. Once a plugin has been added via “addplugins” the player eats additional config-objects named by the plugin and prefixed with “plugin_”. E.g. below, note the “plugin_related” object (on player level configuration):

var player = projekktor('#player_a', {
   controls: true,
   autoplay: false,
   addplugins: ['related'],
   playlist: [   
      {
         0: {src:'http://www.projekktor.com/video/mc.mp4', type:"video/mp4"},
      }
   ],
   plugin_related: {
       related: {
            enabled: true,
            title: 'Related Videos',
            items: [
                {poster: './videoposter1.jpg', url: 'http://www.yoursite.com/vid1', title:'Title 1'},
                {poster: './videoposter2.jpg', url: 'http://www.yoursite.com/vid2', title:'Title 2'},
                {poster: './videoposter3.jpg', url: 'http://www.yoursite.com/vid3', title:'Title 3'}
            ]
       }
   }
});

Please note that some plugins must be configured on item-level why most are configured on player level.

• Audio Slideshow - Create media synchronized image slideshows. This plugin also features a nifty image slider.

• Controlbar - Handles a couple of buttons and sliders to control the player.

• Display - This plugin features the media display, a buffering indicator and a logo-overlay.

• Logo - Adds an ordinary, clickable image overlay to the player´s display to be used as watermark, logo or whatever.

• Postertitle - Adds the title of the currently IDLEing video over the poster image. Fades out on mouseout.

• Related - Adds a post-roll panel which shows thumbnails of related or recommended videos. Also features a “replay” button and optional sharing features.

• Share - Adds social share buttons to the video display, per default those are: facebook, twitter. Links can be easily added, removed and altered by config parameters. It also promotes the embed-code for iframed players.

• Tracking - Allows tracking of all player events and states plus some additional client information by any pixel-image based tracker.

• Tracks - Implements cross-browser interpretation of the HTML5 <tracks>-element to provide subtitles and closed captions. Eats DXFP and SRT / webVTT formatted data feeds.

• VAST / IMA - Reads VAST 1.0 and VAST 2.0 feeds. Supports pre-roll-, overlay- and companion- ads plus relevant tracking. Approved by Smartclip and Google.

Plugins marked with are built into the official Projekktor releases.