SharePoint: Custom Media Video Player using JQuery

Video Player using JQuery in SharePoint 2013
InfoPath alternatives for form designing SharePoint

Introduction:
This article shows how to add following features to the SharePoint inbuilt video player. By using this code, these functions will get added to the SharePoint inbuilt video player, and it will function as a player we use for windows or MAC. (For e.g. windows media player, VLC Player)
– Backward-Forward
– Next-Back

The sequence you have followed while uploading the videos, will be the sequence in the player. Uploaded video will display first followed by new uploaded.

Let’s Proceed:
Edit the page in the browser and add a Content Editor Web part, modify the web part and show the Source Editor to add the following code:




<scripttype=”text/javascript”>

var SERVERURL = GetServerUrl();

$(document).ready(function () {

varListName = “Site Assets”;

query = “<Query><OrderBy>”

+ “<FieldRef Name=\”ID\” Ascending=\”FALSE\” />”

+ “</OrderBy></Query>”;

varsoapEnv = “<soap:Envelopexmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”>”+

“<soap:Body>” +

“<GetListItemsxmlns=\”http://schemas.microsoft.com/sharepoint/soap/\”>” +

“<listName>” + ListName + “</listName>” +

“<query>” + query + “</query>” +

“<rowLimit>1</rowLimit>” +

“</GetListItems>” +

“</soap:Body>” +

“</soap:Envelope>”;

// Call web service

$.ajax({

url: SERVERURL + “/_vti_bin/lists.asmx”,

type: “POST”,

dataType: “xml”,

data: soapEnv,

complete: processListAccessResult,

contentType: “text/xml; charset=\”utf-8\””

});

});

functionprocessListAccessResult(xData, status) {

$(xData.responseXML).find(“[nodeName=’z:row’]”).each(function () {

var title = $(this).attr(“ows_FileRef”);

var n = title.split(“#”);

varmurl = “/” + n[1];

varstrm = “<div style=\”position:absolute;left: 45%;bottom:0px;\” ><a title=\”Backword\” href=\”#\” onclick=\”javascript:BackFive();\”><imGsrc=\”../images/backward.png\” style=\”cursor:pointer;border:none\” /></a><a title=\”Forword\” href=\”#\” onclick=\”javascript:ForwardFive();\”><imGsrc=\”../images/forward.png\” style=\”cursor:pointer;border:none\” /></a></div><a href=\”#\” id=\”ws\” title=\”preview\” onclick=\”javascript:PrevVide(this);\”><imGsrc=\”../images/backV.png\” style=\”float:left;margin-top:150px;cursor:pointer;border:none\” /></a><a href=\”#\” id=\”w3s\” title=\”Next\” name=\”0\” onclick=\”javascript:NextVide(this);\”><imgsrc=\”../images/ForwordV.png\” style=\”float:right;margin-top:150px;cursor:pointer;border:none\” /></a><div id=\”MediaPlayerHost\” align=\”center\”><object id=\”ctl00_m_g_c1d4dbc9_9688_411c_855d_f784ef3d2982\” type=\”application/x-silverlight-2\” data=\”data:application/x-silverlight-2,\” width=\”500px\” height=\”333px\”>” +

” <param name=\”source\” value=\”/_layouts/clientbin/mediaplayer.xap\”/>” +

“<param name=\”enableHtmlAccess\” value=\”true\” />” +

“<param name=\”windowless\” value=\”true\” />” +

“<param name=\”autoUpgrade\” value=\”true\” />” +

“<param name=\”minRuntimeVersion\” value=\”5.0.61118.0\” />” +

” <param name=\”background\” value=\”#C0C0C0\”/>” +

” <param name=\”initParams\” value=\”mediaTitle=,mediaSource=” + murl + “,autoPlay=true,loop=true,previewImageSource=/Style Library/Media Player/VideoPreview.png, mediaFileExtensions=wmv;wma;avi;mpg;mp3;,silverlightMediaExtensions=wmv;wma;mp3;\”/>” +

“<a href=\”http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.60401.0\” style=\”text-decoration: none;\”><imgsrc=\”http://go.microsoft.com/fwlink/?LinkId=161376 \” alt=\”Get Microsoft Silverlight\” style=\”border-style: none\”></a><a href=\”/Shared%20Documents/Toy_Story%201mp4.mp4\” class=\”media-link\” title=\”Open a media player on your client to play audio or video file.\”><span class=\”media-title\”></span></a>” +

“</object></div>”;

vardivRefC = document.getElementById(“divC”);

divRefC.innerHTML = strm

document.getElementById(“ws”).style.display = ‘none’;

});

}

functionGetServerUrl() {

varstrSiteFullUrl = document.location.href;

varlstIndex = strSiteFullUrl.indexOf(“/”, 8);

varstrServerUrl = strSiteFullUrl.substring(0, lstIndex);

returnstrServerUrl;

}

functiongetMediaPlayer() {

var p = document.getElementById(“MediaPlayerHost”)

varobj = p.getElementsByTagName(“object”);

returnobj[0].Content.MediaPlayer;

}

functionForwardFive() {

var p = getMediaPlayer();

varpos = p.PositionMilliseconds;

pos += 5000; /*5 seconds*/

p.PositionMilliseconds = pos;

}

functionBackFive() {

var p = getMediaPlayer();

varpos = p.PositionMilliseconds;

pos -= 5000; /*5 seconds*/

p.PositionMilliseconds = pos;

}

functionNextVide() {

varListName = “Site Assets”;

query = “<Query><OrderBy>”

+ “<FieldRef Name=\”ID\” Ascending=\”FALSE\” />”

+ “</OrderBy></Query>”;

varsoapEnv = “<soap:Envelopexmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”>”+

“<soap:Body>” +

“<GetListItemsxmlns=\”http://schemas.microsoft.com/sharepoint/soap/\”>” +

“<listName>” + ListName + “</listName>” +

“<query>” + query + “</query>” +

“<rowLimit>100</rowLimit>” +

“</GetListItems>” +

“</soap:Body>” +

“</soap:Envelope>”;

// Call web service

$.ajax({

url: SERVERURL + “/_vti_bin/lists.asmx”,

type: “POST”,

dataType: “xml”,

data: soapEnv,

complete: processList,

contentType: “text/xml; charset=\”utf-8\””

});

}

functionprocessList(xData, status) {

varidn = $(“#w3s”).attr(“name”);

idn = parseInt(idn) + 1;

vararr = $(xData.responseXML).find(“[nodeName=’z:row’]”);

varNxtlen = arr.length – 1;

if (Nxtlen>= idn) {

varsurl = $(arr[idn]).attr(“ows_FileRef”);

var n = surl.split(“#”);

varmurl = “/” + n[1];

varstrm = ” <div style=\”position:absolute;left: 45%;bottom:0px;\” ><a title=\”Backword\” href=\”#\” onclick=\”javascript:BackFive();\”><imGsrc=\”../images/backward.png\” style=\”cursor:pointer;border:none\” /></a><a title=\”Forword\” href=\”#\” onclick=\”javascript:ForwardFive();\”><imGsrc=\”../images/forward.png\” style=\”cursor:pointer;border:none\” /></a></div><a href=\”#\” id=\”ws\” title=\”preview\” onclick=\”javascript:PrevVide(this);\”><imGsrc=\”../images/backV.png\” style=\”float:left;margin-top:150px;cursor:pointer;border:none\” /></a><a href=\”#\” id=\”w3s\” title=\”Next\” name=\”0\” onclick=\”javascript:NextVide(this);\”><imgsrc=\”../images/ForwordV.png\” style=\”float:right;margin-top:150px;cursor:pointer;border:none\” /></a><div id=\”MediaPlayerHost\” align=\”center\”><object id=\”ctl00_m_g_c1d4dbc9_9688_411c_855d_f784ef3d2982\” type=\”application/x-silverlight-2\” data=\”data:application/x-silverlight-2,\” width=\”500px\” height=\”333px\”>” +

” <param name=\”source\” value=\”/_layouts/clientbin/mediaplayer.xap\”/>” +

“<param name=\”enableHtmlAccess\” value=\”true\” />” +

“<param name=\”windowless\” value=\”true\” />” +

“<param name=\”autoUpgrade\” value=\”true\” />” +

“<param name=\”minRuntimeVersion\” value=\”4.0.60310.0\” />” +

” <param name=\”background\” value=\”#C0C0C0\”/>” +

” <param name=\”initParams\” value=\”mediaTitle=,mediaSource=” + murl + “,autoPlay=true,loop=true,previewImageSource=/Style Library/Media Player/VideoPreview.png, mediaFileExtensions=wmv;wma;avi;mpg;mp3;,silverlightMediaExtensions=wmv;wma;mp3;\”/>” +

“<a href=\”http://go.microsoft.com/fwlink/?LinkID=124807\” style=\”text-decoration: none;\”><imgsrc=\”http://go.microsoft.com/fwlink/?LinkId=108181 \” alt=\”Get Microsoft Silverlight\” style=\”border-style: none\”></a><a href=\”/Shared%20Documents/Toy_Story%201mp4.mp4\” class=\”media-link\” title=\”Open a media player on your client to play audio or video file.\”><span class=\”media-title\”></span></a>” +

“</object></div>”;

vardivRefC = document.getElementById(“divC”);

divRefC.innerHTML = strm

$(“#w3s”).attr(“name”, idn);

}

else {

document.getElementById(“w3s”).style.display = ‘none’;

}

}

functionPrevVide() {

varListName = “Site Assets”;

query = “<Query><OrderBy>”

+ “<FieldRef Name=\”ID\” Ascending=\”FALSE\” />”

+ “</OrderBy></Query>”;

varsoapEnv = “<soap:Envelopexmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”>”+

“<soap:Body>” +

“<GetListItemsxmlns=\”http://schemas.microsoft.com/sharepoint/soap/\”>” +

“<listName>” + ListName + “</listName>” +

“<query>” + query + “</query>” +

“<rowLimit>100</rowLimit>” +

“</GetListItems>” +

“</soap:Body>” +

“</soap:Envelope>”;

// Call web service

$.ajax({

url: SERVERURL + “/_vti_bin/lists.asmx”,

type: “POST”,

dataType: “xml”,

data: soapEnv,

complete: processSecondList,

contentType: “text/xml; charset=\”utf-8\””

});

}

functionprocessSecondList(xData, status) {

varidn = $(“#w3s”).attr(“name”);

idn = parseInt(idn) – 1;

vararr = $(xData.responseXML).find(“[nodeName=’z:row’]”);

if (arr.length>= idn) {

varsurl = $(arr[idn]).attr(“ows_FileRef”);

var n = surl.split(“#”);

varmurl = “/” + n[1];

varstrm = ” <div style=\”position:absolute;left: 45%;bottom:0px;\” ><a title=\”Backword\” href=\”#\” onclick=\”javascript:BackFive();\”><imGsrc=\”../images/backward.png\” style=\”cursor:pointer;border:none\” /></a><a title=\”Forword\” href=\”#\” onclick=\”javascript:ForwardFive();\”><imGsrc=\”../images/forward.png\” style=\”cursor:pointer;border:none\” /></a></div><a href=\”#\” id=\”ws\” title=\”preview\” onclick=\”javascript:PrevVide(this);\”><imGsrc=\”../images/backV.png\” style=\”float:left;margin-top:150px;cursor:pointer;border:none\” /></a><a href=\”#\” id=\”w3s\” title=\”Next\” name=\”0\” onclick=\”javascript:NextVide(this);\”><imgsrc=\”../images/ForwordV.png\” style=\”float:right;margin-top:150px;cursor:pointer;border:none\” /></a><div id=\”MediaPlayerHost\” align=\”center\”><object id=\”ctl00_m_g_c1d4dbc9_9688_411c_855d_f784ef3d2982\” type=\”application/x-silverlight-2\” data=\”data:application/x-silverlight-2,\” width=\”500px\” height=\”333px\”>” +

” <param name=\”source\” value=\”/_layouts/clientbin/mediaplayer.xap\”>” +

“<param name=\”enableHtmlAccess\” value=\”true\”>” +

“<param name=\”windowless\” value=\”true\”>” +

“<param name=\”autoUpgrade\” value=\”true\” />” +

” <param name=\”background\” value=\”#80808080\”>” +

” <param name=\”initParams\” value=\”mediaTitle=,mediaSource=” + murl + “,autoPlay=true,loop=true,previewImageSource=/Style Library/Media Player/VideoPreview.png\”>” +

“<a href=\”http://go.microsoft.com/fwlink/?LinkID=124807\” style=\”text-decoration: none;\”><imgsrc=\”http://go.microsoft.com/fwlink/?LinkId=108181 \” alt=\”Get Microsoft Silverlight\” style=\”border-style: none\”></a><a href=\”/Shared%20Documents/Toy_Story%201mp4.mp4\” class=\”media-link\” title=\”Open a media player on your client to play audio or video file.\”><span class=\”media-title\”>Media Web Part</span></a>” +

“</object></div>”;

vardivRefC = document.getElementById(“divC”);

divRefC.innerHTML = strm

if (idn == 0) {

document.getElementById(“ws”).style.display = ‘none’;

}

}

$(“#w3s”).attr(“name”, idn);

}

</script>

Video Player using JQuery in SharePoint 2013
Video Player using JQuery in SharePoint 2013
SharePoint Custom Media Video Player using JQuery
SharePoint Custom Media Video Player using JQuery

Summary:

This article explains how to add additional functions to the SharePoint in-built video player.

Similar SharePoint 2013 Tutorials


About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply