SharePoint: Custom Media Video Player using JQuery

This article shows how to add the 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.

<scripttype="text/javascript">
var SERVERURL = GetServerUrl();
$(document).ready(function () {
var ListName = "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("#");
var murl = "/" + n[1];
var strm = "<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>";
var divRefC = document.getElementById("divC");
divRefC.innerHTML = strm
document.getElementById("ws").style.display = ‘none';

});

}

functionGetServerUrl() {
var strSiteFullUrl = document.location.href;
var lstIndex = strSiteFullUrl.indexOf("/", 8);
var strServerUrl = strSiteFullUrl.substring(0, lstIndex);
returnstrServerUrl;
}

functiongetMediaPlayer() {
var p = document.getElementById("MediaPlayerHost")
var obj = p.getElementsByTagName("object");
returnobj[0].Content.MediaPlayer;
}

functionForwardFive() {
var p = getMediaPlayer();
var pos = p.PositionMilliseconds;
pos += 5000; /*5 seconds*/
p.PositionMilliseconds = pos;
}

functionBackFive() {
var p = getMediaPlayer();
var pos = p.PositionMilliseconds;
pos -= 5000; /*5 seconds*/
p.PositionMilliseconds = pos;
}

functionNextVide() {
var ListName = "Site Assets";
query = "<Query><OrderBy>"
+ "<FieldRef Name=\"ID\" Ascending=\"FALSE\" />"
+ "</OrderBy></Query>";
var soapEnv = "<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) {
var idn = $("#w3s").attr("name");
idn = parseInt(idn) + 1;
var arr = $(xData.responseXML).find("[nodeName='z:row']");
var Nxtlen = 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() {
var ListName = "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) {
var idn = $("#w3s").attr("name");
idn = parseInt(idn) – 1;
var arr = $(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>";
var divRefC = document.getElementById("divC");
divRefC.innerHTML = strm
if (idn == 0) {
document.getElementById("ws").style.display = ‘none';
}
}
$("#w3s").attr("name", idn);
}
</script>

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:

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

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

You may like following SharePoint tutorials:

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>