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. 2

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:

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

<script type="text/javascript">

function embedFlashes() {
    var myLayers = document.getElementsByTagName('div');
    if (myLayers.length>0) {
        var myFlashes = new Array()
        for (i=1; i<myLayers.length; i++) {
            if (myLayers[i].className == 'flashcontent') {
                myFlashes.push(myLayers[i].id)
            }
        }
        var so = new Array()
        for (j=0; j<myFlashes.length; j++) {
            tempParam = myFlashes[j].split('::')
            so[j] = new SWFObject(tempParam[0], tempParam[1], tempParam[2], tempParam[3], tempParam[4], tempParam[5]);
            for (p=6; p<tempParam.length; p++) {
                detail = tempParam[p].split('=')
                so[j].addVariable(detail[0], detail[1])
            }
            so[j].write(myFlashes[j])
        }
    }
}

embedFlashes()
</script>

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.:

<div class="flashcontent" id="[url_of_swf_file]::[unique_id]::[width]::[height]::[minimum_flash_version]::[background_color]::[flashvar1=flashvar1_value]::[flashvar2=flashvar2_value]...">[Alternate_content]</div>

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

<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>

Insert the following html to the blog post body:

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

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:

<embed

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="></embed>

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

<div class="flashcontent" id="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.</div>

And the result:

 

Yeee, working!

Technorati tags: SharePoint JavaScript Flash SharePoint Blog

9 comments:

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

How do I set the Parameter value: allowfullscreen=true using your method for the flv player: http://www.jeroenwijering.com/?about=JW_FLV_Media_Player. As the variable method doesn't work.

Anonymous said...

OK, I already found out how to do that. I just added ' this.addParam("allowfullscreen","true"); ' (without the quotation marks) after 'this.addParam("bgcolor",c);'
Khaled

Anonymous said...

Trying hard to make this work. But the quotes get stripped out of the code that you gave as an example. I assume that is wehre I am failing on this. I know that the swfobject.js is being called and the code in the content editor is working. Seems liek it has to be those double quotes getting stripped.

Ideas?

Thanks for this post, btw.

Anonymous said...

how do you enable full screen with youtube videos in your blog?
Thanks

Anonymous said...

I have it so that the video shows on the blog home page fine but if I click the blog title and go to the entry it no longer shows. I tried adding the same script code to a content editor web part on the individual post page and no luck. Then I got rid of the content editor web parts on all pages and instead added the script to the master page template in catalogs and worked like a champ on main blog page but again if I go to individual posting it does not show. Any ideas?
Thanks

Anonymous said...

Never mind. Here was my fix. created doc library as you directed and called script and uploaded swfobject.js to it. Then I added your java script to my master page template at very bottom and changed reference to swfobject.js and pointed to script/swfobject.js. Next I added folder called script that contained the swfobject.js file to the root of the posts list folder as well as root of the Category list folder. With that it showed up in all views. :-)

Anonymous said...

Excellent work around. Thank you very much!

Boris Gomiunik said...

Now there's even an easier way. Please check www.codeplex.com/erte or http://boris.gomiunik.net/erte