Introduction
This article shows how to add the following features to the SharePoint builtin video player. By using this code, these functions will be added to the SharePoint builtin video player, and it will function as a player we can use for Windows or Mac. (For example Windows Media Player, VLC Player).
- Backward-Forward
- Next-Back
The sequence you have followed when uploading the videos, will be the sequence in the player. The uploaded video will display the first followed by the newly 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>
Summary
This article showed how to add additional functions to the SharePoint builtin video player.