Saturday 5 July 2014

SharePoint: Custom Media/Video Player Using jQuery

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 onyour 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>
 
Custom Video Player 
 
 video player
Summary
This article showed how to add additional functions to the SharePoint builtin video player.
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

SharePoint 2013 - Uploading Multiple Attachments To The New Item On List Using JSOM And REST API

  Introduction In this article, we will explore how we can attach multiple attachments to the new item on list using JSOM and REST API. Ther...