Adding Flash animation in SharePoint Blog and other lists pt. 2
Filed Under (Flash, JavaScript, SharePoint) by Boris Gomiunik on 27-02-2008
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!
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.
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
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.
how do you enable full screen with youtube videos in your blog?
Thanks
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
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.
After some back-tracing I managed to get this working as well. In my case the ’-sign created problems. I swapped all ’ for '.
It's difficult to see the difference between the characters here but it is two different characters and one of them made the JavaScript not execute.
Thanks for a great solution.
Hi, Mikael! Thanks for the feedback.
If you want to embed flash into SharePoint, there is even an easier way. See ERTE on this blog (http://boris.gomiuinik.net/erte)
Hi
I tried out the ERTE solution now and yes, it is better. I did have some issues with YouTube clips not playing and found this solution: Edit the Flash file URL: change "/v/" into "/p.swf?video_id=
Be glad to hear if you have a simpler solution.
cheers
Mikael
Hi
I have uploaded the swfobject.js file to document library and added the added the script to the master page template in catalogs.
As a next step I added the
DIV tag to the boby of the blog post successfully.
But i am not getting videos populated.
Any ideas?
where shall i have to upload the .js file and shall i have to update the ’src’ of the below tag.
script type=”text/javascript” src=”swfobject.js”
Thanks
Meera
Hi
I have uploaded the swfobject.js file to document library and added the script to the master page template in catalogs as shown below
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()
As a next step I added the
Please view this post on my website to display the video.
tag to the boby of the blog post successfully.
But i am not getting videos populated.
Any ideas?
where shall i have to upload the .js file and shall i have to update the uploaded path for the ’src’ of the below tag.
Thanks
Meera
Hi, Meera. This is an obsolete method. It’s easier to use the ERTE (www.sharepointboris.net/erte).