Tag Archives: Page Component

Embedding Video to a SharePoint Library

Overview

We have already discussed how to embed video from YouTube and another Video Providers into SharePoint, in particular it was demonstrated  how to:

In both cases some kind of customization should be applied for List/Library in order to render YouTube player in List Forms and Views. In first case custom fields are used for storing embed code properties and a computed field for rendering player. In the second case, custom fields are used for storing embed code itself and YouTube player is rendered via customized List View and Field.

This time we will discuss another approach that is intended for sharing video in out-of-the box List and Libraries, like Blogs and Discussion Boards.

How to embed Video in SharePoint Blog and Discussion Board

Before we will dive into technical details about implementation let me show some usage scenarios.

In order to embed a video into SharePoint:

  • On YouTube site click the Share button located under the video.
  • Click the Embed button.
  • Copy VideoId value from  src attribute value provided in the expanded box .
    EmbedYT
  • Add reply  for a Discussion and select Insert Tab – Share Video – YouTube Video Button to insert YouTube video on page
    ShareVideo_Ribbon
  • Specify YouTube Video parameters and click OK button to insert YouTube player on page
    ShareVideo_RteDialog
  • Saved Message item (for Discussion List)
    ShareVideo_Message
  • Blogs View
    ShareVideo_Blogs

Solution

The solution consist of:

  • SharePoint Ribbon and Page Component for Sharing Video
  • RTE with the capability to insert video player
  • Render video player on List Forms and Views

SharePoint Ribbon and Page Component for Sharing Video

1. The existing group Ribbon.EditingTools.CPInsert.Media is extended with the buttons for video sharing.

2. Video Sharing Page component is developed for interaction with the Server Ribbon:

Type.registerNamespace('MediaExtensions.Ribbon.RTE');
//Page Component for Sharing Video
MediaExtensions.Ribbon.RTE.VideoPageComponent = function () {
MediaExtensions.Ribbon.RTE.VideoPageComponent.initializeBase(this);
}
MediaExtensions.Ribbon.RTE.VideoPageComponent.prototype = {
mediaCommands: ['VideoGroup', 'ShareVideo', 'ShareVideoMenuOpen', 'ShareVideoMenuClose', 'EmbedVideo', 'InsertVideoWeb'],
registerWithPageManager: function () {
CUI.Page.PageManager.get_instance().addPageComponent(this);
}, getFocusedCommands: function () {
return this.mediaCommands;
}, getGlobalCommands: function () {
return this.mediaCommands;
}, canHandleCommand: function (commandId) {
return true;
}, handleCommand: function (commandId, properties, sequence) {
if (commandId === 'ShareVideo') {
this.invokeVideoCommand(commandId);
return true;
}
if (commandId === 'InsertVideoWeb') {
this.invokeVideoCommand(commandId);
return true;
}
return true;
}, isFocusable: function () {
return true
}, receiveFocus: function () {
return true;
}, yieldFocus: function () {
return true;
}, invokeVideoCommand: function (commandId) {
RTE.SnapshotManager.takeSnapshot();
var range = RTE.Cursor.get_range();
if (!range.get_isEditable()) {
return;
}
var dlg = new MediaExtensions.Ribbon.RTE.ShareVideoDialog();
dlg.show(commandId);
RTE.SnapshotManager.takeSnapshot();
}
}
MediaExtensions.Ribbon.RTE.VideoPageComponent.registerClass('MediaExtensions.Ribbon.RTE.VideoPageComponent', CUI.Page.PageComponent);
//Register Page Component for Sharing Video
NotifyScriptLoadedAndExecuteWaitingJobs("sharevideoribbon.js");
function ShareVideoInit() {
var currentPageManager = SP.Ribbon.PageManager.get_instance();
currentPageManager.addPageComponent(new MediaExtensions.Ribbon.RTE.VideoPageComponent());
}

view raw
sharevideoribbon.js
hosted with ❤ by GitHub

RTE with the capability to insert video player

By default  YouTube video player is rendered as IFrame element. Since in SharePoint 2010 it is not allowed to store iframe content into Publishing HTML field the alternative solution is proposed here:

1. User provides all  the properties for video in RTE dialog
ShareVideo_RteDialogOnly

2. Video player tag is inserted into SharePoint Rich Text Editor from RTE dialog:

<!– Video player tag is inserted into SharePoint Rich Text Editor from RTE Dialog –>
<!– When the List Form or View page is rendered, this tag is replaced with <iframe> (and video player) via YouTube IFrame API –>
<div id="ytplayer">
<span style="display: none;">Z6-iUNfJsJw;320;215</span> <!– player info in the following format VideoId;Width:Height –>
</div>

view raw
RTE_Video.html
hosted with ❤ by GitHub

3. When the List Form or View page is rendered, YouTube player is created and video is loaded.

Render video player on List Forms and Views

The IFrame player API is intended for embedding a YouTube video player on a website and control the player using JavaScript. The IFrame API posts content to an <iframe> tag on a page.

The code demonstrates how to create an embedded player that will load a video

var ytplayersinfolist = [];
//This function creates an <iframe> (and YouTube player)
//after the API code downloads
function onYouTubeIframeAPIReady() {
if (typeof window.playerInfoList === 'undefined')
return;
for (var i = 0; i < window.playerInfoList.length; i++) {
createYTPlayer(window.playerInfoList[i]);
}
}
// This function loads the IFrame Player API code asynchronously
function registerYTIFrameApi() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api&quot;;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function initYTPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
height: playerInfo.height,
width: playerInfo.width,
videoId: playerInfo.videoId
});
}

view raw
ytplayer.js
hosted with ❤ by GitHub

References