Embedding a Silverlight Video in a Blog

  • Article

In this post, I will describe how to use Windows Live Writer to embed a Silverlight video into a blog post. You will need: (1) an active Windows Azure subscription, (2) an active Windows Azure storage service, (3) a Silverlight video player application with video hosted on Windows Azure, and (4) Windows Live Writer installed.

The top-level post with a table of contents to all the related posts is here.

1. Go to https://gallery.live.com/liveItemDetail.aspx?li=f84d87b9-e284-4691-aa90-2d628e67af6f&bt=9 and download the Insert from Windows Azure Storage plug-in for Windows Live Writer.

clip_image002

Follow the prompts to download and install the plug-in.

2. Start Windows Live Writer and locate the Azure Blob Item plug-in.

clip_image004

3. The Insert Azure Blob Item dialogue will appear.

clip_image006

You will need to enter the publishing endpoint, the access key and the CDN endpoint (if used). This information can be obtained from the Windows Azure Developer Portal.

clip_image008

4. Click on Refresh, and you should see a list of containers in your Azure storage account. If you have been following the examples, the only one you will see is called “foo”. Select “foo” and you will see the contents of this container.

clip_image010

If you click on Default.html, you will see the Silverlight application appear in the preview window.

clip_image012

You can now either embed the player directly into your blog post, or link to it. You can also use the CDN endpoint (if it has been enabled) by checking the “Use CDN” checkbox. Click on Insert to continue.

5. In Windows Live Writer, you will see the Silverlight application appear on the writing page.

clip_image014

The Windows Security Warning (which may appear several times) may safely be dismissed by clicking Yes. If you click No, the Silverlight application will not be displayed within Windows Live Writer, but will still be published to your blog if you click Publish.

You can resize the embedded player by clicking and dragging and can configure the plug-in settings in the plug-in panel that appears when the embedded player has focus.

When you publish your blog post, readers will see a seamless post containing your text, hosted on your blog, and an embedded Silverlight player, hosted on Windows Azure.

FIrefox users should note that at the moment, when you insert the iframe, Firefox will display the player with a recessed look and with scroll bars. See this post for information on how to fix this. IE and Safari are unaffected.