Post on 19-Mar-2020
transcript
1
Media Platform Sitecore Module
Installation & Developer Guide A guide to installing & working with the Media Platform video plugin
For further information please contact info@streamuk.com
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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.
Page 4 of 17
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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="kaltura.api@streamuk.com"/>
<setting name="Kaltura.Password" value="password"/>
</settings>
</sitecore>
</configuration>
Page 5 of 17
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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
Stream UK Media Services Ltd, 1 Water Lane, London, NW1 8NZ Reg. Company No.: 4206916 VAT: GB774 2593 02
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(); } }