.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

SharePoint: Custom Media/Video Player using JQuery

Posted By:Sagar Pardeshi       Posted Date: April 26, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

SharePoint: Custom Media/Video Player using JQuery
 

Introduction:

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

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 explains how to add additional functions to the SharePoint in-built video player. 


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend