RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Light Up the Web: Microsoft Silverlight Streaming by Windows Live

Microsoft Silverlight Streaming offers free and inexpensive hosting services that make exposing your video and audio content as easy as pie.

n summer 2007, Microsoft released version 1.0 of Silverlight, a revolutionary way to build rich interactive experiences on the web. Silverlight is a cross-platform, cross-browser plug-in that extends the browser's Document Object Model (DOM) with vector graphics and multimedia features. Based on XML Application Mark-up Language (XAML), the same technique used in the Windows Presentation Foundation (WPF), Silverlight can be scripted with JavaScript and can work within AJAX-enabled web pages.

Microsoft Silverlight Streaming by Windows Live is a free streaming and application hosting service for delivering rich interactive applications (RIAs) over the web. Silverlight supports a range of video formats including high definition (HD) and (SMPTE) VC-1.

Silverlight provides a consistent user experience with Firefox and Safari on the Mac and Firefox and Internet Explorer on Windows. Even Linux users can run Silverlight using Novel's open-source Moonlight code. In fact, you're not locked into the Microsoft platform at all—it's just as easy to deliver Silverlight experiences from PHP sites on Apache/Linux as it is from ASP.NET sites on a Windows Server.

In this article you'll see how to get started with Silverlight and how to upload your applications and rich media to the Silverlight Streaming Service.

"Hello World" in Silverlight
Users need to install the Silverlight 1.0 runtime for their browsers. The first users visit a Silverlight-enabled site such as http://www.microsoft.com/silverlight, they're directed to an installation process. The runtime is surprisingly small (less than 2 MB) and installs quickly and painlessly.

I'll start with a simple Silverlight "Hello World" demonstration.

Using XAML, define a Canvas that includes a TextBlock with the "Hello World" text and save this file as Hello.xaml:

   <Canvas xmlns="http://schemas.microsoft.com/client/2007" 
   <TextBlock FontFamily="Times New Roman" 
     Text="Hello World" />
Create a short HTML page to host the Silverlight control, and call it Default.html:

     "-//W3C//DTD XHTML 1.0 Transitional//EN"
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
       <title>Hello World</title>
       <script type="text/javascript" 
       <script type="text/javascript" 
       <div id="SilverlightPlugInHost">
         <script type="text/javascript">
You must also provide two JavaScript files. The first, Silverlight.js, is part of the Silverlight SDK, so you get it when you download the SDK. The second, CreateSilverlight.js contains the code responsible for instantiating the Silverlight control with your specific XAML page. Here's the code:

   function createSilverlight()
         source: 'Hello.xaml',
         parentElement: document.getElementById(
         id: 'SilverlightPlugIn',
Figure 1. Running the Silverlight Hello World Application: Loading the default.htm page runs the CreateSilverlight.js script to instantiate the Silverlight control.
properties: { width: '400', height: '400', background:'#ffffff', isWindowless: 'false', version: '1.0' }, events: { onError: null, onLoad: null }, context: null }); }
You should now have four files: default.htm, Hello.xaml, CreateSilverlight.js, and Silverlight.js. Launching default.htm in a browser runs the application (see Figure 1).

Editor's Note: This article was first published in the "Windows Live" edition of CoDe Focus Magazine (2008, Vol. 5, Issue 2), and is reprinted here by permission.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date