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.