Home > BLogs, Content Editor Web Part, Javascripts, Jquery, SharePoint, Video, Web Parts > (Jquery)Display Video in SharePoint Blogs from document library

(Jquery)Display Video in SharePoint Blogs from document library

SharePoint Blogs OOB filters out all the html for embedding any kind of video in them. I use Windows live writer for my Blog post. I use one of the plug-in I think, but even though it wont embed the video within SharePoint it will show take a screenshot of  the video and link to the external site, which is fine for me.

To Display local intranet videos within blog takes bit of work, either hyperlink to media file or Content Editor web part for embedded code.

I using Jquery to accomplish this.

Instead of embedded we shall use Hyperlinks to media files and Jquery.Media plugin for turning them into inline videos.

Steps

1.Create 2 Document Libraries

  •  Media: To store all your media files.
  • Resources: To store JavaScript and other files.

2. Download Files.

3.Upload the Jquery JS and mediaplayer.swf to Resource Document library

4.  Edit Jquery Media JavaScript File . In Default Configuration section change location of mediaplayer.swf to the one you just uploaded. Save the file

clip_image002

5. Save and Upload Jquery Media to the Resources document library.

6. On Blog Home Page. Add a content Editor Web Part and Open Source Editor.

Add following script tags to it. (Change the src of javascript location to reflect the files you uploaded in steps above.)

<script type="text/javascript" src="/sharepoint/Sharepoint%20Blog/Resources/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="/sharepoint/Sharepoint%20Blog/Resources/jquery.media.js"></script>

<script type="text/javascript" >

$("a").media();

</script>

clip_image004

7.Upload some media files to Media Library

Create a new blog post

in Body Section add a Hyperlink to a video you uploaded to Media library.

clip_image006

File Jquery Media Supports

* Supported Media Players:
*    – Flash
*    – Quicktime
*    – Real Player
*    – Silverlight
*    – Windows Media Player

For more information on Jquery Media click here  http://malsup.com/jquery/media/#overview

Note : If script doesn’t execute replace inline script with this :

<script>

function loadMedia() {

$("a").media();

}

_spBodyOnLoadFunctionNames.push("loadMedia");

</script>

If that does not work  I would try this in inline script tags

$(document).ready(function() {

$("a").media();

   });

Advertisements
  1. July 29, 2009 at 11:39 pm

    Damn, that sound’s so easy if you think about it.

  2. February 4, 2010 at 12:38 pm

    http://vkatalogah.ru/ – прога прогона по каталогам статей

  3. Malay
    February 25, 2010 at 6:04 am

    Hi,

    The website that you gave for mediaplayer.swf just doesn’t open. Where to get this file from now?

  4. April 12, 2010 at 5:28 pm

    😉

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: