Let's say you have an adventure travel business with a Microsoft Office Live Small Business account. One of your customers just brought in a great video of a bear he saw on one of your trips. Wouldn't it be cool if you could put it on your Web site? You can, using the Web site design tools included with your account. One way to do it is to first post the video on a public site such as Soapbox or YouTube and then re-display it on your site using the video module. If you would prefer not to use one of these public-searchable sites, there's a new alternative: Microsoft Silverlight.
Silverlight is a way to deliver a rich, interactive experience to customers on your Web site. And Microsoft Silverlight Streaming is a new companion service that provides free private space to host your videos.
This article will show you how you can add a video as a Silverlight application to your Web site without paying a consultant. Microsoft now provides all of the free or low-cost, easy-to-use tools that you need.
In this article
Get yourself set up
Your Office Live Small Business account and your Microsoft operating system automatically provide most of what you need to add a video as a Silverlight application to your Web site. There is just one more piece of software, plus an add-in, that you need to download and one more Web account that you need to set up.
Download Expression Encoder
You can use Microsoft Expression Encoder 2 to encode your video and publish the video player in your Silverlight Streaming account.
- To download a trial version of Expression Encoder 2, go to the Microsoft Expression Encoder download page.
- Download and install the Silverlight Streaming Publishing Plug-in for Expression Encoder 2.
Create a Silverlight Streaming account
Microsoft Silverlight Streaming by Windows Live is a companion service for Silverlight that offers you a free and convenient way to host and stream rich interactive applications. The steps below walk you through hosting a Silverlight Application using Silverlight Streaming. To create your free account, see Microsoft Silverlight Streaming.
Top of Page
Encode your video as a Silverlight application
Now that you have the tools that you need, you're ready to start the process. To display the video on your Web site, you must complete the following three tasks:
- Encode your video as a Silverlight application.
- Publish your Silverlight application to Silverlight Streaming.
- Add your Silverlight application to your Web page.
The first step in creating a Silverlight application from a video is to encode the video. The video to be encoded must be in a format that is included in the list of formats that can be imported into Expression Encoder. To view the complete list of acceptable media formats:
- On the Start menu, point to
All Programs, click
Microsoft Expression, and then click Microsoft Expression Encoder 2.
- In Expression Encoder, on the Help menu, click User Guide.
- Under Importing, click Supported file formats.
If you do not yet have a video and you are using the Windows Vista operating system, you can use any of the three sample videos that come with the operating system. To find these sample videos:
- On the Start menu, click Search.
- In the Search box, type sample videos.
- Under Files, click the Sample Videos folder.
The example in this article uses the sample video titled Bear, which is in a .wmv format.
To encode your video using Expression Encoder, do the following:
- On the Start menu, point to
All Programs, click
Microsoft Expression, and then click Microsoft Expression Encoder 2.
- In Expression Encoder, from the File menu, click Import.
- Click Browse, find the video that you want to display, and select it. Click Open.
- At the top of the right pane, click Encode.
- Under Profile, in the
Video
drop-down box, select Streaming 256k DSL.

- At the top of the right pane, click Output.
- Under Job Output, next to Template, in the drop-down list, select a template. The Expression template is the template selected in this example. The template that you select determines the look and feel of the video player, including the border that appears around the video and the video controls. Each time you click a template name, a preview of the design is shown below the selection.
- In the right pane of Expression Encoder, make sure that both Sub-folder by Job ID and Preview in browser are selected.

- At the bottom of Expression Encoder, click Encode. After the encoding process is complete, a preview of the output appears in a browser window. You can close this window when you have finished previewing the video.
Expression Encoder just created all of the files that you need to display your video.
Top of Page
Publish your Silverlight application to Silverlight Streaming
Using the publishing plug-in for Expression Encoder, you can now publish the encoded video player to your Silverlight Streaming account.
- In Expression Encoder, under Publish, in the Publish to drop-down list, select Silverlight Streaming.
- Under Settings, clear the Automatic name check box.
- In the Application Name box, type a name for your encoded video application (for example, BearVideo).
- In the Account box, type your Silverlight Streaming account ID.
- In the Key box, type your Silverlight Streaming account key.
- If you want to have Expression Encoder save your account ID and account key, click Save Key.
Note If you do not know your Silverlight Streaming account ID or account key, visit the Silverlight Streaming site and sign in. On the left navigation bar, click Manage Account. Your account ID and account key are listed at the bottom on the right.

- Click Publish.
Top of Page
Add your Silverlight application to your Web page
Note If you partially redirected a domain name to your Office Live Small Business account: Before you can make changes to your Web site after partial redirection, you must change the primary domain to your free Office Live Small Business domain that ends in .officelive.com. For more information, see Make changes to your Web site after partial redirection.
- In the publishing plug-in for Expression Encoder, on the right side under Publish, in the Code text box, select and copy the HTML code.
- Sign in to your Office Live Small Business account. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager opens.
- In Page Manager, to the right of the name of the page to which you want to add the video, click Edit.
- In Page Editor, click the zone where you want to add the video.
- In the actions bar, click Module, and then click HTML.
- In the text box, paste the HTML copied from the Silverlight Streaming site. The code should be similar to this:
<iframe src="http://silverlight.services.live.com/
invoke/YourAccountID/BearVideo/iframe.html"
scrolling="no" frameborder="0" style="width:500px;
height:400px"></iframe>
- Click OK. The video now plays on your Web page.
- In the Web design tool, click Save.
- To watch the video as it will appear to Web site visitors, click View.

Congratulations! You have just added your first Silverlight application to your Web page. Now you know that the steps to make this happen are within your grasp and can be done with a simple software tool and a Web account. You can add Silverlight applications to your Web site to engage your visitors
with rich and interactive media and keep them returning to your site.
To learn more about Silverlight, see the Silverlight pages on Microsoft.com.
To learn more about using the HTML module in Office Live Small Business, see Inserting HTML code into your Web site.
Top of Page