Insert Video into List Item (Enhanced Rich text box field) SharePoint 2010

Problem: In our News site, any article is published as new list item, we wanted to have ability to add Videos in to the Article.

Limitations:

We could not add out of the box web part on the list’s display.aspx page as it will display same video on each article, and at the same time, it will not be embedded in to the text and will have separate appearance on bottom or top of the article page.

SharePoint does not support embedding video object using ribbon or enhanced rich text box html editor, if you try then it removes the <embed> or <object> tags once you save the list item.

I goggled to see if embedding video in to rich text box is achievable, and I could found solution for MOSS 2007 only, with query rich text control.

 As we didn’t have much time to develop the ribbon control, I could manage below workaround. I hope below solution works for you.

Solution:

Apart from the SharePoint out of the box Media Web Part, SharePoint uses the Silverlight overlay player, I observed it when I had uploaded the Video in asset/media library  on thumbnail view .

You can use this player on any SharePoint page/HTML Page/content editor web part or your Media/Training /Video library sites.

Below is the basic script that you could use, you may make it more dynamic to work with your video libraries.

1)      Copy below script where you want to display the video, and pass the required parameters.

<script type="text/JavaScript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.js"></script>

<script type="text/javascript" src="_layouts/mediaplayer.js"></script>

 mediaPlayer.createMediaPlayer(

                videoHolder,   videoHolder.id,  '500px',   '333px',

                 {

                     displayMode: 'Inline',

                     mediaTitle: 'Video Entry',

                     mediaSource: ‘videoURL’,

                     previewImageSource:'',

                     autoPlay: false,

                     loop: true,

                     mediaFileExtensions:'wmv;wma;avi;mpg;mp3;',

                     silverlightMediaExtensions:'wmv;wma;mp3;'

                 }

            );

For more details visit below site-

http://msdn.microsoft.com/en-us/library/ee558890.aspx

To use this player as embedded in to the Rich text box follow below steps:

1)      Open display.aspx page of the list where you want to embed the video.

2)      Go to, Site Actions -> Edit Page

3)      Add content editor web part on your display.aspx page at bottom.

4)      Make sure you have jquery.js included in master page if not then include the reference to jquery file in below script.

5)      Copy and paste below script into the content editor web part you just added.

<script src="/_layouts/mediaplayer.js" type="text/javascript"></script><script type="text/javascript">

$("a[title^='Media']").each(function(){

var txt = "<div id='"+ $(this).attr("title")  +"'>" +

"<a href='"+ $(this).attr("href") +"'><img width='"+ $(this).children('img').attr("width") +"' height='" + $(this).children('img').attr("height")+"' src='"+ $(this).children('img').attr("src") +"'/></a></div>";

$(this).replaceWith(txt);

_spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');

mediaPlayer.attachToMediaLinks((document.getElementById( $(this).attr("title"))),['wmv', 'avi', 'mp4']);

});</script>

6)      Stop editing the page, and save current changes.

7)      Now Edit the item where you want to embed the video.

8)      Insert the cursor where you want to add the video (as highlighted below)

9)      In ribbon go to Insert -> Picture -> picture from computer

10)   Select the Preview image (considering already uploaded in some image library) from the image library which will be act as preview for the video, resize it if you want

11)   Make sure inserted image is selected, then go to ribbon -> insert -> Link -> from SharePoint

12)   Link the image with the video you want from the asset library (Considering you have already uploaded the video in asset/media lib)

13)   Make sure after linking you give description as Media1( you may change this name, make sure you also change it in the script as well)

14)   If you want to add multiple videos, follow the same steps except step 13. For last step you need to be sure of adding description, it should be unique and follow same naming convention e.g Media1, Media2, media3 etc…

15)   After adding videos save the article/list item, and once its rendered you will see the overlay player working for you.

Sorting SharePoint list item attachments

-This script is designed/tested only on Display form of list item.
-Add your attachment field under a div using SP designer, <div id="divAttachment"> <SharePoint:AttachmentsField ControlMode="Display" FieldName="Attachments" runat="server" Visible="true"/></div>
-Add below script on the page
<script language="javascript">
var fullHtml = $('#idAttachmentsTable').html();
var fileName = new Array();
var i = 0;
$("#idAttachmentsTable").find('a').each(function() {
fileName[i]  = new Array();
fileName[i][0]= $(this).text();
fileName[i][1] = $(this).attr('href');
i++;
});
fileName.sort();
document.getElementById('divAttachment').innerHTML = '';
for(var cntArr=0; cntArr<fileName.length;cntArr++)
{
 var strHref = "<a href='"+fileName[cntArr][1]+"'>"+fileName[cntArr][0]+"</a><br/>";
 document.getElementById('divAttachment').innerHTML += strHref;
}
</script>

Hide SharePoint List Fileds with blank value from Display form, using HTML comments

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("Fields");
function FindField(fieldName) {
   // get all the HTML comments
   var arr = document.getElementsByTagName("!");
  
   for (var i=0;i < arr.length; i++ )
   {
      // check the field name
      if (arr[i].innerHTML.indexOf(fieldName) != -1)
          return arr[i];     
        
   }
}
//implimenation of string trim function
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/, ''); };
function Fields() {
   var field = FindField("All Day Event");
    HideField(field);
 field = FindField("Recurrence");
 HideField(field);
 field = FindField("Workspace");
 HideField(field);
}
function HideField(field)
{
 if( field!= null)
 {

 
  var childNods = field.parentNode.childNodes;
  for( var j=0; j< childNods.length;j++)
  {
   if(childNods[j].innerHTML != null)
    {
     var innerCode = field.parentNode.innerHTML;
     var cmtCode = childNods[j].innerHTML;
     var cmtEnd = innerCode.lastIndexOf("-->");
     var childCmtEnd = cmtCode.lastIndexOf("-->");
    
      if(childCmtEnd > 0)
      {
      
       var len=   innerCode.length;
       var fieldValue = innerCode.substring(cmtEnd + 3, len);
        if(fieldValue != null)
       {
        fieldValue = fieldValue.replace("&nbsp;","");
      
        fieldValue = fieldValue.trim();
         if(fieldValue == "" )
           field.parentNode.parentNode.style.display="none";
    
        }
      }
      else
      {
     if(childNods[j].outerHTML.indexOf("<IMG") != -1)
     continue;
    
     var otherThanCommentTag = childNods[j].innerHTML;
      otherThanCommentTag = otherThanCommentTag.replace("&nbsp;","");
      otherThanCommentTag = otherThanCommentTag.trim();
      otherThanCommentTag= otherThanCommentTag.replace(/<(.|\n)*?>/g,"");
 
      if(otherThanCommentTag == "" )
           field.parentNode.parentNode.style.display="none";
      
      }
 
   }
 }
 
}
}
</script>

jQuery to find and replace HTML content

$(document).ready(function(){

$('body').children().each(function() {
//I wanted to replace localhost\sparky to sparky
//first param of replace is nothing but the regex, you can also use the regex
var loginname= $(this).html().replace(/localhost\\sparky/g,'sparky');

//this replaces the modified HTML
$(this).html(loginname);

//I wanted to remove the time stamp 12.00 AM from date
var time= $(this).html().replace(/12.00 AM/g,' ');


//this replaces the modified HTML
$(this).html(time);
});



});

Getting Current User and setting it to the People Picker using JavaScript

//Set People picker field to current user by Andy Bonner

_spBodyOnLoadFunctionNames.push("fillDefaultValues");



function fillDefaultValues()

{

fillPeoplePickerWithCurrentUser('Submitted_x0020_By');

}



function fillPeoplePickerWithCurrentUser(pickerName)

{

//get the current user from the welcome menu
var currentUser = getCurrentUser();
//check to see that we've got it
if(currentUser != null)
{
//get the people pickers input div
var pp = getPickerInputElement(pickerName);
//set it to the current user if we've found it
if(pp != null)
pp.innerHTML = currentUser;

}

}


function getCurrentUser()
{
var tags = document.getElementsByTagName('a');
for (var i=0; i < tags.length; i++)
{
if(tags[i].innerText.substr(0,7) == 'Welcome')
{
return tags[i].innerText.substr(8,tags[i].innerText.length);
}
}
}


function getPickerInputElement(fieldsInternalName)
{
var result = "";
var divs = document.getElementsByTagName("DIV");
for(var i=0; i < divs.length ; i++)
{
if(divs[i].id=="WebPartWPQ2")
{
var tds = divs[i].getElementsByTagName("TD");
for(var j=0; j < tds.length; j++)
{
var cellHTML = tds[j].innerHTML;
if(cellHTML.indexOf('FieldInternalName="' + fieldsInternalName + '"') >= 0)
{
var innerDivs = tds[j].getElementsByTagName("DIV");
for(var k=0; k < innerDivs .length; k++)
{
if(innerDivs[k].id.indexOf("UserField_upLevelDiv") > 0)
{
result = innerDivs[k];
break;
}
}
}
}
}
}
return result;
}