Table of Contents
Related Plugin
General
Provides a “related videos” and “share me” postroll display.
Install / Preparation
Scripts
Include the “projekktor.related.js”. Make sure its loaded after “projekktor.min.js”.
HTML
No preparations required. Loads directly into the player´s DOM.
CSS
Include the “projekktor.related.css” to your page´s <head> or copy and paste the mentioned CSS into your theme.css. Alter at will.
Configuration
Setup
Make sure you activate the plugin by adding it to the event dispatcher. To do so set “addplugins” accordingly, e.g.:
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'}
]
}
}
});
Config Options
showOnStart (Boolean:false)
Display the “related”-panel right after the player initialize and before starting any video. Useful during CSS customization.
related (Object)
Holds the setup for the “related videos” lineup.
related.enable (Boolean:true)
Enable / Disable related items.
related.title (String:'Related Videos')
The headline for all related items.
related.items (Array:[])
An array of items to show within the “related videos” section. E.g.:
[
{poster: 'http://www.img.com/img1.jpg', url: 'http://www.projekktor.com/vid1', title:'Title 1'},
{poster: 'http://www.img.com/img2.jpg', url: 'http://www.projekktor.com/vid2', title:'Title 2'},
{poster: 'http://www.img.com/img3.jpg', url: 'http://www.projekktor.com/vid3', title:'Title 3'}
]
share (Object)
Holds the setup for the link to provide for content sharing.
share.enable (Boolean:true)
Enable / Disable the link-share-textarea.
share.title (String:'Link to this Video')
The headline for the shared URL.
share.code (String:'http://%{playerurl}?vidid=%{ID}')
The URL to provide as “shared URL”. You can use two placeholders here to make the player generate the string automatically.
%{playerurl} will get replaced by the window.location.href of the affected player instance. Note that this will be the iframe-URL for embeddable players.
%{ID} will be replaced either by a randomly generated string of 8 characters or by an ID you specified in your playlist setup by setting “id” within the item specific config block.
embed(Object)
Holds the setup for the shareable embed code.
embed.enable (Boolean:true)
Enable / Disable the embed-code-textarea.
embed.title (String:'Embed this Video')
The headline for embedding.
embed.code (String:'<iframe id="%{embedid}" src="%{playerurl}?vidid=%{ID}" width="640" height="385" frameborder="0" </iframe>')
The code build the embed code from.
%{playerurl} will get replaced by the window.location.href of the affected player instance. Note that this will be the iframe-URL for embeddable players.
%{embedid} will be replaced by the iframe-ID as defined in the parent window.
%{ID} will be replaced either by a randomly generated string of 8 characters or by an ID you specified in your playlist setup by setting “id” within the item specific config blo
replay(Object)
Holds the setup for the “replay” functionality.
replay.enable (Boolean:true)
Enable / Disable the replay-button.
replay.title (String:'Embed this Video')
Title for the very same button.
