Media Platform Sitecore Module Installation & Developer Guidestaticcontent.streamuk.com/sitecore/installation.pdf · 1 Media Platform Sitecore Module Installation & Developer Guide

1

Media Platform Sitecore Module

Installation & Developer Guide A guide to installing & working with the Media Platform video plugin

For further information please contact [email protected]

mailto:[email protected]

Page 2 of 17

Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02

Introduction

This installation guide contains instructions for developers to install and configure the module. This

guide contains step-by-step instructions for developers to install and configure the module.

Once installed a new field type of ‘Video’ will be added to the system along with a corresponding

filed renderer.

INSTALLATION 3

Prerequisites 3

Module Installation 3

Download the installation package 3

Install the package 3

Configuration 4

Overview 4

Creating a User Account in Media Platform 4

Configuring Sitecore 4

CONTENT INTEGRATION 5

Overview 5

Simple Integration 5

Add a Video field to a content template 5

Editing a Content Item 5

Selecting an Existing Media Entry 6

Editing the Properties of a Media Entry 7

Capturing or Uploading a Thumbnail 8

Rendering a Player 8

Using the VideoPlayer server control 9

Adding a Poster using the VideoPlayer 11

Versioning, WorkFlow & Multilingual Content 12

Overview 12

Consuming fields from Sitecore 12

Related Content 14

Overview 14

Using a Sitecore Field 14

Using DMS or dynamically 17

Page 3 of 17


Installation

Prerequisites

Sitecore CMS 6.5 or higher

A StreamUK Media Platform account

Module Installation This section covers how to install the Stream UK Media Platform module for Sitecore

Download the installation package

The installation package can be found at http://www.streamuk.com/sitecore

Install the package

Install the Sitecore installation package using the Sitecore Installation Wizard. The package will add

items and templates, code files, and a configuration file specific to the Media Platform module.

http://www.streamuk.com/sitecore

Page 4 of 17


Configuration

Overview

This section contains step-by-step instructions for configuring the module and connecting to your

Stream UK Media Platform account.

Creating a User Account in Media Platform

We recommend that you create a new user account specifically for your Sitecore installation, to

create a new account log into your Media Platform account and add a new user to your account of

type ‘Manager’.

Configuring Sitecore

The Stream UK Media Platform account is configured in the configuration include file:

/App_Config/Include/Sitecore/Sitecore.Kaltura.config

Here simply replace the username and password with the details of the account you have just

created.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"

xmlns:x="http://www.sitecore.net/xmlconfig/">

<sitecore>

<settings>

<setting name="Kaltura.Username" value="[email protected]"/>

<setting name="Kaltura.Password" value="password"/>

</settings>

</sitecore>

</configuration>

Page 5 of 17


Content Integration

Overview This section contains step-by-step instructions for embedding video players in website content using

the Video field type, the instructions are based on a vanilla installation of Sitecore.

Simple Integration

Add a Video field to a content template

To add a video field to a content template; login to the Sitecore content editor and edit the template

you will now be able to add a field of type ‘Video’ as illustrated below.

Editing a Content Item

Once the field has been added to the template the user can choose to upload a new media entry to

Media Platform, or choose an existing media entry from their account.

In addition uploading and selecting media content form within the Sitecore content editor users can

also directly edit the media entry’s meta data and capture or upload thumbnail images.

Page 6 of 17


Selecting an Existing Media Entry

The user can click on the ‘Browse’ menu item to open the ‘Browse’ dialog, from here the user can

search for a media entry.

Page 7 of 17


Editing the Properties of a Media Entry

Once the user has selected a Media Entry to use they can choose if they wish to edit the properties

of the Media Entry by clicking on the ‘Properties’ menu item, this will launch the properties dialog

from where they can make changes; all changes made here are immediately saved to Media

Platform.

Depending on the player chosen to view the video the Name and Description may be presented to

the end user as illustrated below.

Page 8 of 17


Capturing or Uploading a Thumbnail

Once the user has selected a Media Entry to use they can choose if they wish to change the

thumbnail for the media Entry, to do this they can click on the ‘Thumbnail’ menu option to display

the Media Entry Thumbnail dialog.

Within the dialog the user can select the thumbnail to use from the list of available images or

capture a new thumbnail from the video.

Rendering a Player

To render a player on the website you will need to use make use of either the PlayerRender server

control, or choose to implement the rendering yourself with the aid of the developer guides.

Page 9 of 17


Using the VideoPlayer server control To add the Media Platform Player to the website we will need to create a sub layout to contain the

control then edit the corresponding ascx file.

To use the server control you will need to add a reference to the MediaPlatform assembly.

<%@ Register Assembly="MediaPlatform" Namespace="MediaPlatform" TagPrefix="mp" %>

Once you have added an assembly reference to the ascx filed you can add a VideoPlayer tag and

configure the FieldName property to the name of the video field.

In addition to configuring the video field you will need to configure the playerid and the dimensions

of the player, the player ID can be found by in the Studio section of your Media Platform account.

The code example below shows the VideoPlayer configured to render the player at 640 x 480 pixels

using the player with id ‘11170236’, shown in the studio as ‘Player with no share button’.

<%@ Register Assembly="MediaPlatform" Namespace="MediaPlatform" TagPrefix="mp" %> <mp:VideoPlayer runat="server" FieldName="video" Width="640" Height="480" PlayerID="11170236" />

Page 10 of 17


Once this sub-layout has been added to the website we can see the Media Platform Player displayed

on the website, the control handles all logic associated with Flash player detection and HTML5

support for mobile devices.

Clicking on the information icon reveals the name and description of the video pulled from Media

Platform.

Page 11 of 17


Adding a Poster using the VideoPlayer In order to keep your pages light weight and responsive it is recommended that rather than

rendering the Media Platform Player on page load that you render a poster element in html that

once clicked is replaced by the video player.

To make this easy to implement the VideoPlayer server allows you to define this content using a

template control called PosterTemplate.

The example below illustrates how to display the video thumbnail as the poster image which when

clicked will play the video.

<%@ Control Language="c#" AutoEventWireup="true" %> <%@ Register Assembly="MediaPlatform" Namespace="MediaPlatform" TagPrefix="mp" %> <mp:VideoPlayer runat="server" ID="uxVideo" FieldName="video" Width="640" Height="480" PosterPanelID="uxPoster" > <PosterTemplate> <mp:VideoThumbnail runat="server" ID="uxVideo" FieldName="video" width="640" height="480" /> </PosterTemplate> </mp:VideoPlayer>

The example above is the most basic implementation but the poster can be customised to include any HTML so complex designs like those illustrated below can quickly be created.

Page 12 of 17


Versioning, WorkFlow & Multilingual Content

Overview

In the previous examples the name, description and thumbnail images were retrieved directly from

Media Platform and were not subject to the benefits of Sitecores workflow.

For a deeper integration that will support Sitecores advanced workflows, versioning and multilingual

functionality we recommend retrieving this MetaData directly from the Sitecore CMS. This is

supported by the rendered object installed when as part of the plugin; this sample shows you how.

Consuming fields from Sitecore In order to retrieve the name, description and thumbnail from the Sitecore content item the

renderer object contains the following properties

NameFieldName

DescriptionFieldName

ThumbnailFieldName

For example if we extend the Sample Item template to include an image field and set these

properties on our sub-layout as illustrated below

<%@ Register Assembly="MediaPlatform" Namespace="MediaPlatform" TagPrefix="mp" %> <mp:VideoPlayer runat="server" FieldName="video" Width="640" Height="480" PlayerID="11170236" NameFieldName="video" DescriptionFieldName="video" ThumbnailFieldName="video" />

Page 13 of 17


When we view the page in the preview mode we can now see that the player has loaded the title

and summary content from Sitecore and not Media Platform.

This is facilitated because the player makes a call to the generic handler “videometadata.ashx”

located in “sitecore modules\web\kaltura” which returns an xml document containing

the field data.

Page 14 of 17


Related Content

Overview

At the end of each video or when the information icon is clicked the player can be configured to

render a list of related content items as illustrated below.

Using a Sitecore Field

The VideoPlayer control can be configured to load a list of related from a TreeList or TreeListEx field

by setting the property ‘RelatedFieldName’, the related content can be any Sitecore content item

type.

First add a Treelist or TreelistEx field to your content item.

Page 15 of 17


Edit the sub—layout to include the RelatedFieldName property.

<%@ Register Assembly="MediaPlatform" Namespace="MediaPlatform" TagPrefix="mp" %> <mp:VideoPlayer runat="server" FieldName="video" Width="640" Height="480" PlayerID="11170236" NameFieldName="video" DescriptionFieldName="video" ThumbnailFieldName="video" RelatedFieldName="related items" />

The user can then select the related content items using the Content Editor

Page 16 of 17


At the end of the video, or when the user click on the information icon the related content item is

the now presented, clicking on the image will take the user to the related content page.

Page 17 of 17


Using DMS or dynamically

The related content items displayed within the player could be modified to be based on based on

DMS profiles or other custom by extending the generic handler “videometadata.ashx” located

in “sitecore modules\web\kaltura” which returns an xml document containing the field.

For example if we were to configure Profile and Pattern Cards and profile all of our content we could

filter the content items returned returned to the user to match the users behaviour, items can be

filtered using the following code:

private static Dictionary<string, List<string>> AnalyticsFilter() { var filter = new Dictionary<string, List<string>>(); if (Tracker.CurrentVisit.Profiles.Count() > 0) { foreach (VisitorDataSet.ProfilesRow row in Tracker.CurrentVisit.Profiles) { var keys = new List<string>(); foreach (var key in row.Values) { if (key.Value >= ResourceHelper.GetInt(new ID(Resources.Settings.AnalyticsProfileSetMinValGuid))) keys.Add(key.Key); } filter.Add(row.ProfileName, keys); } } if (ResourceHelper.IsTurnedOn(new ID(Resources.Settings.AnalyticsUserProfileEnableSwitch))) filter = ApplyUserProfile(filter); return filter; } public static List<Item> FilterItemByBehavior(List<Item> items, int count) { try { var filter = AnalyticsFilter(); foreach (var profile in filter) { int counter = ResourceHelper.GetInt(new ID(Resources.Settings.AnalyticsProfileTagsFilterMaxGuid)); if (items.Count <= count) break; foreach (string key in profile.Value) { if (items.Count <= count || counter == 0) break; items = items.Where(i => (((MultilistField)i.Fields[profile.Key]).GetItems().ToList().Select(x => x.Name).Contains(key))).ToList(); counter--; } } return items.Count <= count ? items : items.Take(count).ToList(); } catch (System.Exception ex) { return items.Count <= count ? items : items.Take(count).ToList(); } }

Documents

Media Platform Sitecore Module Installation & Developer Guidestaticcontent.streamuk.com/sitecore/installation.pdf · 1 Media Platform Sitecore Module Installation & Developer Guide