Custom Media/Video Player Using jQuery

Posted: July 13, 2014 in SharePoint2010

Introduction

This article shows how to add the following features to the SharePoint built-in video player. By using this code, these functions will be added to the SharePoint built-in 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://http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://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\“></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://http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://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\“></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://http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://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\“></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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s