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!
