Important notice

Please note that this blog is discontinued here. All the posts are also coppied to my new blog at http://boris.gomiunik.net.
Important: Due to large amount of comment spam further commenting has been disabled here. If you wish to send me a comment, plase look up the same post on my new blog and leave comment there. Thanks!

2/26/2008

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

UPDATE: This is an outdated method. There is a much easier way. See ERTE on Codeplex or ERTE on my new blog.


SharePoint's rich text field is much better than in version 2.0. It even enables to edit the HTML source. But one thing I don't understand is why it filters out the HTML code so much that we can't even embed the Flash animations or videos into the content. This is a major drawback for SharePoint Blog.

Fortunately I've come up with a nearest thing to a remedy. It's using Deconcept SWF object. It will replace an "alternative" content in a layer with a flash animation (this is also a good way to bypass the "Click to activete this control..." issue in IE). 

Let's say we have a blog and a video to embed for example - this one from YouTube. A simple way of doing it - if you have only one video in the page is:

1. Create a document library and upload the swfobject.js (downloaded from author's website) to it (or just upload it to the root of your website with SharePoint Designer).

 

2. Add a blog post and in the body edit the HTML code and insert the following code:

<div id="flashcontent">Please check this post on my website to view the video</div>

3. In the blog homepage and in the post details page (post.aspx), add a Content editor webpart and edit the source. Enter the following code:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var so = new SWFObject("http://www.youtube.com/v/Z2yNzw00mpA&rel=1", "mymovie", "425", "355", "8", "#FFFFFF");
    so.write("flashcontent");
</script>

For comparison I'm pasting also the YouTube's embed code and I'm color coding it to match the script:

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Z2yNzw00mpA&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>


For more details on the script and how to add flashvars. Just be sure to have the right path to swfobject.js and to have the right ID of the div and in the script (in the case above: "flashcontent".

This is the result:

 

Unfortunately in the RSS is still showing the alternate content.

 

This is the method of adding only one video per page. You'd need multiple div ids and you't always need to add to the script below. Fortunately I've prepared a way of automating this. More about this... Stay tuned for my next post.

Technorati tags: SharePoint JavaScript Flash SharePoint Blog

11 comments:

Anonymous said...

Hi,
I tried to add the video on the blog post but unfortunatly it is not working and the video is opening in the content viewer webpart but not on the blog post.
Please help me to resolve this issue.

Anonymous said...

Hi BorG,
A client recently asked me how to put video into a SharePoint blog post,by searching i found this article which is very helpful. But it is not working for me.
1.I have created the documentlibrary and added the swfobject.js file
2.Created the blog post and edited the html source for the body.
3.Created the content editor webpart and the added the mentioned content

But blogpost is showing only the body text but not the video.

Please help me where iam doing the mistake and if possible kindly demonstrate using screenshots.

Thanks in Advance

Boris Gomiunik said...

You can't just copy-paste the embed code. The content editor will show properly, but when saving to SharePoint list, the embed code will get filtered out. The only way is as I described in this post. Make sure you:

1. have the javascript refferenced
2. have the code in all the pages displaying the post with video
3. have the correct layer information in the post.

fendi164 said...

Hi, the post is great but i have a bit of a problem. My blog homepage does not have a Content editor webpart to be added. How can i add the webpart editor to my list of webparts to add when i design the page ?
Thanks.

Affendi

Boris Gomiunik said...

If your Blog SharePoint website doesn't have Content Editor Webpart in a list, this is probably, because your top-level website was deployed like a blog. That's nothing wrong with it, Just your webpart library didn't get populated with standard webparts. If you have the option to create a new top-level website, create a blank site or a team site. Then open the webpart galery (_catalogs/wp), download all the webparts and upload them to the WP galery of your Blog site.

Dave B said...

This is an ingenious workaround. I got it up and running, but I find the performance slow.

Specifically, the javascript runs fine, the SWFObject creations are quick, but when it comes time for IE6 or IE7 to render the page, it takes FOREVER.

Firefox performance has no issues at all.

Anyone have any thoughts?

Boris Gomiunik said...

Hi, Dave!

You should check the newer stuff:

http://www.codeplex.com/erte

or http://boris.gomiunik.net/erte

That one's even easier to implement and to use.

Anonymous said...

Hi,

I have uploaded a newssticker kind of a program on my sharepoint website. I have flash file and an xml file in place for it work.

Now, the problem is I need the end user to edit the xml file and write his own news every week and I dont him to use the designer to edit this XML. I created a doc lib and copied the flash file and the xml file, however for some reason, my flash program is reading data from the root xml but not from the doc lib.

so, how should i deal with it. I need a way to upload the xml file on my sharepoint, so taht end user will update it when needed and need not go into the desinger to do that. following is the code that i used to insert flash file on my website.

object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="Newsticker" align="top" style="width: 530px; height: 100px; float:left"
param name="allowScriptAccess" value="sameDomain" /
param name="movie" value="http://uptospeeduat/new-example/Flash Files News Ticker/Newsticker.swf" /
param name="quality" value="High" /
param name="wmode" value="transparent" /
param name="bgcolor" value="#000000" /
embed src="http://uptospeeduat/new-example/Flash Files News Ticker/Newsticker.swf" wmode="transparent" quality="High" bgcolor="#000000" name="Newsticker" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" style="width: 400px; height: 150px" /
/object

Boris Gomiunik said...

You can upload the xml file to SharePoint. If you have SharePoint Designer, use DataSource library task pane to add an xml file.

After you've added it, insert a data view to the page and you can enable the edit capability to that dataform webpart. So editing XML files with SharePoint will be easy and no use for SharePoint Designer for end customer.

Anonymous said...

Hi, thanks for replying my query, however it still didnt solve my problem, as i was not sure if I was doing it the right way.

Anyways, I'll tell you my problem in details.
I have a new flash which has a picture, news headline and news in details.

Whenver end user needs to update the news, they have to update all three of them. so I need the pictures along with the xml file on the website itself. I dont want end user to use Sharepoint Desinger to update them.
please help me with the detial steps.

Appreciate all your help.

Anonymous said...

I found a cool third party web part that allows you to play flash movies in a SharePoint Site.

The site is webpartgallery.com and then select web parts.

Its the Flash Movie Web Part. It had an installer and it works well. Simple if you just want to buy a quick and cheap solution.