Play Video clips in browser saved in Document Library

We will run the video clips on the same page in the player which are saved in the Document Library.

Steps:

  Step 1: Create a document library named “Videos”.
  Step 2: Upload the video clips in the Videos document library.
 Step 3: Create a web part page named “Preview” & add the web part zones in two columns as shown below.

  Step 4: In the left column add the Videos Document library & in the second column add a CEWP.

  Step 5: In the CEWP insert the following code of the windows media player to play the related file.

The functions in the following codes reads the current video from the document library & runs it in the media player.

<div align="center" id="Player">

<object width="400" height="400" id="contentPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param name="url"/><param name="uiMode" value="full"/>

<param name="autoStart" value="-1"/>

<param name="stretchToFit" value="-1"/>

<param name="windowlessVideo" value="0"/><param name="enabled" value="-1"/>

<param name="enableContextMenu" value="-1"/>

<param name="fullScreen" value="0"/></object>&#160;</div>

<script type="text/javascript">

function getParameter(szName)

{

// Get value out of supplied parameter

var szUrl = window.location.search;

szUrl = szUrl.toLowerCase();

szName = szName.toLowerCase();

var szValue = "";

var nBegin = szUrl.indexOf(szName);

if (nBegin != -1)

{

szValue = szUrl.substring(nBegin + (szName.length + 1));

}

var nEnd = szValue.indexOf("&");

if (szValue != "" && nEnd != -1)

{

szValue = szValue.substring(0, nEnd);

}

return szValue;

}

function wmpCreate(url) {

var str = "";

var agt = navigator.userAgent.toLowerCase();

var is_ie = (agt.indexOf("msie") != -1);

if (is_ie) {

// create the WMP for IE

str = '<object id="contentPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="400">';

} else {

// create it for FF.

str = '<object id="contentPlayer" type="application/x-ms-wmp" data="'+url+'" width="400" height="400">';

}

str += '<param name="url" value=""/>';

str += '<param name="uiMode" value="full">';

str += '<param name="autoStart" value="-1" />';

str += '<param name="stretchToFit" value="-1" />';

str += '<param name="windowlessVideo" value="0" />';

str += '<param name="enabled" value="-1" />';

str += '<param name="enableContextMenu" value="-1" />';

str += '<param name="fullScreen" value="0" />';

str += '</object>';

return str;

}

function videoCreate() {

document.getElementById('Player').innerHTML = wmpCreate();

var wmp = document.getElementById('contentPlayer');

wmp.URL = getParameter("url");

wmp.controls.play();

}

_spBodyOnLoadFunctionNames.push("videoCreate"); </script>

The page will look as follows:

 

        Step 6: Open the Preview page in the SharePoint Designer.

        Step 7: Add a new column to the right of the document library as shown below.

      

        Step 8:  A new column to the right gets added as shown below.

      

                

             

       Step 9: Keep the cursor in the last column of the first entry i.e. Demo Video.

       Step 10: Click on the Hyperlink tab in Insert ribbon of the designer. The hyperlink popup will appear.

      Step 11: In the Text to display field type the name Preview & in the Address field type the following JavaScript:

javascript: {ddwrt:GenFireServerEvent(concat('__redirect={Preview.aspx?url=http://Demo/sites/sitename/Videos/',@FileLeafRef,'}'))}

       

 

Where:

 Preview.aspx = The name of the page

url= The path of the corresponding document library from where the video is to be played.

     

         Step 12:   Click OK. The Preview name will be displayed in the last column as shown below.

       

        Step 13: Save & close the file from SharePoint Designer & open the page in the browser. The page will appear as follows

 Step 14: The Preview link appears automatically in front of the item whenever a new video clip is uploaded in the document library.
 Step 15: When the user clicks on the Preview link the corresponding clips runs in the media player.