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