Adding Flash animation in SharePoint Blog and other lists pt. 2

February 27th, 2008 | Categories: Flash, JavaScript, SharePoint

This post continues the topic from my first part about embedding Flash videos in SharePoint Blogs where we’ve learned how to embed one Flash animation or video (or have a lot of work for publishing each flash).  The problem arises if we want to embed more videos and have them displayed automatically.

Since SharePoint is very strict about filtering a LOT of the code out, I’ve devised a way of passing all the parameters needed for swf object through ID. And how to recognize divs for the swfobject? Using CSS class name.

Here’s what we need to do:

1. Have te swfobject.js uploaded to the site.

2. Add the following javascript at the end of the page (or in a Content editor webpart below the posts or list items:

3. Now in the content you need to edit the HTML code of the body and insert the layers in the following format (note – input parameters are separated by double colon.:

[Alternate_content]

Let’s reuse the sample from previous post and some color coding. To embed

425" height="355">http://www.youtube.com/v/Z2yNzw00mpA&rel=1">http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">

Insert the following html to the blog post body:

http://www.youtube.com/v/Z2yNzw00mpA&rel=1::video01::425::355::8::#FFFFFF">Please view this post on my website to display the video.

The rest of parameters are made up – video ID is video1, it requires flash 8 and background color is #FFFFFF – white. Let’s do another sample with flashvars – the same video on MSN Video. The Embed code is:

src="http://images.video.msn.com/flash/soapbox1_1.swf" quality="high" width="432" height="364" base="http://images.video.msn.com" type="application/x-shockwave-flash"
allowFullScreen="true" allowScriptAccess="always" pluginspage="http://macromedia.com/go/getflashplayer" flashvars="c=v&v=d41e1dfd-919b-4d57-89c9-736f9c75db14&ifs=true&fr=msnvideo&mkt=en-US&brand=">

To embed this video you’d use the following HTML code:
 

http://images.video.msn.com/flash/soapbox1_1.swf::MSNVideo01::432::364::8::#FFFFFF::c=v::v=d41e1dfd-919b-4d57-89c9-736f9c75db14::ifs=true::fr=msnvideo::mkt=en-US::brand=">Please view this post on my website to display the video.

And the result:

 

Yeee, working!

Technorati tags: SharePoint JavaScript Flash SharePoint Blog