Archive for May, 2007

My Flash vs Silverlight Video Test - step-by-step

Monday, May 28th, 2007

A couple of days ago I talked about Microsoft’s new Silverlight player and streaming service.  So, I thought it only appropriate that I try it out.

So, today, I used a demonstration video for our ValuedClientSystem.com product to test the encoding software and streaming service.  The video is currently available as a Flash video on our main ValuedClientSystem.com website. Here’s what I did to create the Silverlight version:

  1. I downloaded and installed the new (still in beta) Expression Media Encoder product and entered the 180 day trial key (available on the download page).
  2. I created myself a streaming account by visiting the streaming site.
  3. The video was originally created using Camtasia Studio (you can see the original demo video here in flash which is 6.8mb).  so, I went back into Camtasia and published the video as a straight AVI file without compression - this 5 minute 43 second video came out at 1.81GB and I would use this file as input to Microsoft’s new encoder.
  4. Expression Media Encoder Profile for my videoAfter importing the AVI file in to the Expression Media Encoder I needed to choose the settings for output.  Now, the free streaming account has some file size and bandwidth limitations.  Essentially the maximum 700Kbps would support a video length of 4.3 minutes, or at 300Kbps that’s 10 minutes of video.  So, I experimented with the output profile to find a combination of bit rate, frame rate and height/width.  This took me a few encodings (it took about 5 minutes to encode my 5 minute 43 second video).  The final profile looked like the picture on the right.
    Note that I also selected a template in the media encoder output options which then causes the necessary Silverlight files to be produced.
    I found that that if you upload a Silverlight application that is above the supported streaming limits, it still displays, just with an annoying bar across the middle of your video displaying a count corresponding to the current play position in the video.
  5. Then I followed the instructions on the silverlight development site to create a silverlight application.  basically, create a file called manifest.xml (simply copied from the instructions);  then zip this file along with the others described in the instructions in to a single zip file.
  6. Upload the zip file as an application using my new streaming account (simply select the ‘Upload a Silverlight Application’ under Manage Applications).
  7. Then I followed the 3 steps given straight after the upload process, which provide a snippet of HTML to include at the top of my web page, then insert the provided HTML on the page where I wanted the video file to appear and finally it provides a line of code to include in a new file that I create called CreateSilverlight.js.
  8. You can see the final result of these efforts in this ValuedClientSystem.com demonstration video in Silverlight.

Apart from the ‘guess work’ required in choosing the encoding options (which I’m sure there is a sensible way to alleviate), the process is very straight forward.  Well, actually if you’re not used to working with HTML source code perhaps it would be pretty odd.  I’m sure that as tools for Silverlight come to market, these ‘code’ steps will be done automatically - just like the way Camtasia isolates you from it this kind of requirement with Flash or Windows Media videos today.

So, what about the result?  Well, I like the idea that my web hosting account doesn’t have to take the bandwidth hit for streaming video (there are other ways to avoid this like u-tube branded video or of one of the media streaming hosters).  But I’m not convinced about the quality of the output.  If you compare the Flash video produced by
Camtasia
with the Windows Media Encoder output - the Flash quality is better and the media file is 2MB smaller.

I suspect this has something to do with the fact that the folks at TechSmith have made good choices for me about the Flash encoding.  And indeed, if I use Camtasia to produce a Windows Media file version of the same project, the file is much smaller (half the size of the Flash file) and much better quality.  Hmmm… I still plenty to learn about the Silverlight encoding process… I’ll let you if I make progress here (or, please feel free to add helpful comments to this post!)

-Mark

Mark Quirk is a director at Know It Use It Ltd
http://www.ValuedClientSystem.com - From Prospects to Customers to Valued Clients
http://www.VCSHosts.co.uk – Create Your Online Business In A Box

Free, unbranded, video streaming!

Thursday, May 24th, 2007

On 30th April Microsoft made a major announcement and update to a new product it calls Silverlight.

Silverlight is a web browser plug-in for playing rich media content, much like you would expect with Adobe’s Flash player.  Unusually for Microsoft, this is a cross platform and cross browser plug-in, tested on Windows in Internet Explorer and Firefox and on a Mac in Safari and Firefox and on Windows based mobile devices like PDA’s and Smartphones.

Of course, Adobe already provides coverage of these platforms, so there must be something different and special for Microsoft to make any kind of impact with this type of application.

In my Beyond the Browser piece last month I gave the example of the British Libraries ‘Turning The Pages‘ application as being beyond the browser… using the internet as a delivery mechanism, but not using HTML like a typical web page.  The problem with the Turning the Pages application is that it is designed to run only on Microsoft Windows - which if you run a Mac is frustrating.

Well, this new Silverlight product has the ability to run this style of ‘rich interactive application’ cross platform.  Well, yes, OK, just like Flash.

There appear to be three unique benefits Microsoft is leaning on:

  1. Very high quality video - right up to 720p, High Definition and using standard encoding which means that millions of hours of video is already compatible with the player.  AND very low cost (staring FREE) video streaming (sign-up here).
  2. Great tools support for building rich interactive applications
  3. Integration with HTML and AJAX applications

Imagin having high definition video streamed to your web browser!  I still don’t have a HD compatible TV (I know, I’m lagging, I’ll get there), but I do have an HD compatible computer monitor :-)

What’s just as exciting is that Microsoft are offering the ability to host your own video on their streaming servers so you and your customers can stream it - saving you having to spend money on the bandwidth (and no U-Tube type branding).

Now, this ‘free streaming’ has limits, but even after final release of the products, 1 million minutes of streaming at 700 Kbps will still be free.  For the details of bandwidth limits etc take a look at the What You Gettt section of the Silverlight streaming page.

Great tools can make a huge different to the speed of technology adoption.  If it’s easy and inexpensive to do something great, that’s a great start.

Microsoft is in the process of releasing its Expression product set for web designers, and it has extended these tools to support Silverlight.  Specifically Expression Media for encoding video, Expression Design for creating graphical elements and Expression Blend for combining graphics, video and user interaction.  Again you can read all about these products on Microsoft’s site.

The key for me, in a nutshell is that they provide a clean and straightforward ‘programming’ model.  I find the Adobe Action Script approach somewhat frustrating - though clearly there are some very proficient people out there that don’t have that problem.

Finally, the HTML and AJAX application support means that Silverlight applications can easily interact with the web pages that host them; this should result in a much better experience for the website user!

There’s plenty more to Silverlight than I’ve discussed here and you can read more here., but I hope you’ve got the flavour.  Rich interactive applications on the web take another leap forward.

-Mark

Mark Quirk is a director at Know It Use It Ltd
http://www.ValuedClientSystem.com - From Prospects to Customers to Valued Clients
http://www.VCSHosts.co.uk – Create Your Online Business In A Box