Embedding Silverlight Videos in Community Server
Wednesday, May 23, 2007 6:50 PM
If you are running a blog using Community Server and have been looking at the Silverlight player for playing videos, this could be of interest. I wanted a way where I could take a regular WMV file, encode it for the web, and embed it in one of my blog posts - the result was the embedded video in the last post. For those interested, this is how I did it:
First, we need to encode the original WMV file.
1. Download and install the Microsoft Expression Media Encoder May Preview.
2. Using the encoder, create a new project, and import your WMV.
3. Set the specific settings for the output of your project - such as the chapter markers (these are great for navigating through a complex technical deck) and the meta data. I'd recommend setting the output to Web Streaming for DSL to keep the file sizes down. Also, in the job output settings, select a look and feel for the Silverlight player.
4. Run the encoder to generate the directory of files, including the encoded WMV and the .js files you'll need. If you want the video not to autoplay on display, edit the StartPlayer.js file and set the autoplay to false.
5. Upload these to a directory on your site.
You should now be able to direct people to the default.html file generated, but it's of course nice to have this embedded within a blog entry. To do this:
6. Edit the communityserver.config file for your CS installation.
7. Enable iframes in blog posts and pages by adding the following line in the MarkUp/html section:
<iframe src="true" mce_src="true" scrolling="true" height="true" width="true" frameborder="true" marginHeight="true" marginWidth="true"/>
Important note: By doing this you are also giving the ability for users to add iframe declarations to comments (which can embed other unwanted content on your site). If you have any concerns about who your users are, or if you are not manually filtering comments you may want to rethink this.
8. Open and resave (with no changes) the web.config file. This is required to "kickstart" CS into reloading your settings.
9. Upload communityserver.config and web.config file to your blog.
10. In your blog entry, switch to HTML view and insert the iframe statement.
<iframe frameborder="0" height="480" marginheight="0" marginwidth="0" scrolling="auto" src="/myuploadedvideo/default.html" mce_src="/myuploadedvideo/default.html" style='width: 556px; height: 419px' width='600'></iframe>
You'll probably want to tinker around with the settings to accurately fit your window. The frameborder=0 hides the border on the iframe making your video fit in a little nicer.
Overall, it seems to work well, although I'm not that excited about opening up iframes in blog posts and pages. If I can find out how to embed the Silverlight control using <object> or <embed> I'll probably update it.