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 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>

 
Custom Video Player 
 
 video player

Summary

This article showed how to add additional functions to the SharePoint builtin video player.