SharePoint

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs