Creating, Encoding and Delivering Silverlight Streaming Screen Capture Videos

New Profiles

These new profiles allow you to encode your video with a 10 second output buffer instead of the default 5 second buffer. I have noticed that the Silverlight Streaming service can slow down at times, so by increasing the buffer size, the videos seem to have better play back.

I will update the article videos soon and provide both 5 and 10 second buffer links so that you can see the difference.

Packaging Your Screen Capture

After you have successfully encoded your video and have verified the data rate is below 300KB, the next step is to prepare a .zip file package. I have provided all the files you will need to build you package in the download for this article.

The Silverlight media player piece I got from the Microsoft Expression Encoder. If you don't like the player I have included in this download, the feel free to write you own, or download and select a different Silverlight media player. When Silverlight 2.0 gets released, I'm going to write my own player, but for now, the one in this article has all the features necessary and it looks OK.

Uploading Your Screen Capture

Once you have prepared your .zip file archive with all the necessary files, you will upload them to your Silverlight Streaming account. This is a very simple process. After your package is uploaded, you will be able to test it, modify it and even remove it if you don't require it anymore.

Consuming Your Screen Capture

Once your video has been uploaded, you can then place links to expose your video to the world. There are three methods that I know of to expose your video. Placing a link to your video like I have done at the top of this article. Placing an IFrame HTML element in your web page so that the video looks like it's part of your web page. Last, you can use the JavaScript and HTML tags that the Silverlight Streaming site will provide you after you upload a video package.

For me, just having a link is great. The reason I like this method so much more, is because when the user clicks the link, their browser opens and the Silverlight media player consumes the entire region of the browser. If the user resizes their browser, the media player also resizes. This is different from placing an IFrame tag in the web page, as the IFrame is a fixed size.

Now, the Silverlight media player has a cool full screen mode, but I like to be able to resize my browser.

Another reason for using the links is that, Code Project will not allow anyone to use the IFrame HTML tags. This restriction is a good thing which limits abuse of this great site. So for all you Code Project developers, you produce and upload you videos to Silverlight Streaming and then simply add link to your video within your article.

If you really want a preview image, you can make one, upload the image with your other article images and place it in your article. Then make the image the link to your video.

I have emailed the powers here at Code Project and they are considering a good number of options for us developers here at Code Project with respect to article videos. So for now, a simple link is a great solution that places no burden on the Code Project resources.

If you have a WordPress.com blog, you can use the IFrame method if you want. Check with your blogs policies and procedures on how they recommend you post videos in your blog entries. But the news is good, you can always place a link to your Silverlight Streaming video and your visitors will not be disappointed.

Creating Your Screen Capture

A very good approach to mastering this entire process is to start with a few 30 second videos. Try one at 1024x768 and another at 800x600. Then go through the entire process of uploading the package, viewing the video and compare results. Find what works for you.

Also, if you have never done this before, you'll see that this is not that easy at first. Be prepared for take 1, ..., 5, 6, 7, 8 and yes! finally did it.

Ensure that you read the Camtasia documentation and that you watch their training videos. They have a lot of them and they are done very well. TechSmith is the master of screen capture, you can learn a lot from their years of experience. You will save yourself a lot of time and frustration by learning all you can up front. This article can't even come close to providing you all you need to know to use the Camtasia product.

In order to make a screen cast with audio, you need a good computer microphone. Having a headset with a boom mike is great. I'm using the Cyber Acoustics AC-400. Best computer microphone I've ever used. Inexpensive too. You can search the web and find what works for you.

Write yourself a short outline on your topic. Be brief and concise. Don't go so fast that the listener can't absorb what you are trying to communicate. Remember, you can always make a second or third video to cover your topic.

Camtasia Recording Settings

Please note, these Camtasia screen shots are all from Camtasia v4.0. Version 5 screens will look a little different but you should be able to follow along.

After launching Camtasia studio you will be prompted to start the Camtasia Recorder. After a few screens you will get to the above screen.

You will need to click on the little down arrow graphic next to the Fixed Region icon. This will open the Fixed Region dialog box..

You will want to uncheck the, Fixed starting point CheckBox, verify your screen capture area height and width and press OK.

The effect of doing this is, when you now press the Record button, a rectangle will appear that you can now drag around your screen. This rectangle is the area that will be recorded.

Once you press the Record button you are on the air. Take your time and enjoy the process. Once you get the hang of it, making screen capture videos will be fun and you will get real good at it.

Camtasia also has advanced editing capabilities. For example, if you are 8 minutes into your video and make a mistake, you can mark the video while you are recording, continue on and finish and then edit out the bad section. This takes just a little bit of practice but it's worth the time to learn.

Video making and production is also good skill to have on your resume.

Encoding Your Screen Capture

First I would like to thank Melissa from TechSmith technical support for spending 30 minutes on the phone with me, working out the details and editing the preset file in the project download.

In the project download there are three .prx preset files.

• Camtasia_Studio_output_for_Microsoft_Silverlight.prx - supplied by Camtasia technical support.
• Camtasia_Studio_output_for_Microsoft_Silverlight_Modified_290.prx - my edited version of their file that always encodes files within the Silverlight Streaming limits.
• Screen_Encoding_For_Free_Silverlight_Streaming.prx - my Expression Encoder profile that always encodes files within the Silverlight Streaming limits.

Camtasia Profile Instructions

After unzipping the article download, ensure Camtasia Studio is closed.

Copy these two files to the ...\Program Files\TechSmith\Camtasia Studio 4(5)\Windows Media Profiles directory.

Expression Encoder Profile Instructions

After unzipping the article download, ensure Expression Encoder is closed.

You will probably have to create the \Profiles sub-directory since it is not created by default.

Windows XP users copy the file to the ...\My Documents\Expression\Expression Encoder\Profiles or for Vista ...\Documents\Expression\Expression Encoder\Profiles directory.

Editing These Preset Profiles

Included in the Windows Media Encoder 9.0 download is the utility program, Windows Media Profile Editor. You can import the preset files and edit them. When saving the files, I strongly encourage you to write them to another file and not overwrite the ones provided.

You can always encode videos at a higher rate, but if you want the free Silverlight Streaming service, your videos must stay within their 300KB limitations.

Encoding With Camtasia Producer

After you have finished recording and editing your video, you will produce your video. These next few images are a small part of the Producer dialog box. The dialog has 8 pages or so. These images show the selection you need to make in each dialog page.

Production Settings

Select the, "Custom production settings" and then Next.

Output Settings

When encoding videos for Silverlight Streaming, select, "WMV-Windows Media streaming video"

Preset Settings

Select the, "Camtasia Studio output for Microsoft Silverlight Modified 290"

Updated 1/28/08: If you get the newest article download, there is also a profile that includes a 10 second buffer. I have noticed better play back with a 10 second buffer. Its name is, "Camtasia Studio output for Microsoft Silverlight Modified 290 10 Second Buffer."

These are the profiles that I included in the article download. You can also edit these profiles I provided or use another one. Remember, your video must have a data rate of 300KB or less when you have completed the encoding process.

Output Size Settings

If your source video size is 1024x768 or less then you can use the, "Largest video size (Recommended)" setting.

If you need to, you can resize your video here. Select custom size and enter the value to resize your video to.

If you have a large size video and the data rate is greater than 300KB, then use this screen to resize the recording to a smaller size. I have resized 1024x768 down to 800x600 with good results.

This is where the trial and error comes into play. This is also why you should start with short 30 second clips, since they don't take any time at all to produce. Compare results and find what works for you.

You can also set the background color of your video. Play around with this setting if you like and see how the color looks after you deploy your video.

One other setting I set. I check the, "Disable Callout fade effects to reduce file size." With these short, small and compact screen capture videos, the less features you have enabled and use, the better. You need to stay under the 300KB limit.

Encoding With Microsoft Expression Encoder

If you are going to use Expression Encoder, I recommend that you read the help documentation. It is short and easy to follow. Also, please watch the Expression Encoder video at the top of this article.

After you have finished recording and editing your video, you will produce your video. These next few images are screen shots from the Expression Encoder application.

Open Expression Encoder and import the .avi file you want to encoded. Use the menu and select, File, Import... and select your file.

Select the Settings tab on the right side of the application. In the Profile, Video section, select the, "Screen Encoding For Free Silverlight Streaming (Karl Shifflett)" profile.

Updated 1/28/08: If you get the newest article download, there is also a profile that includes a 10 second buffer. I have noticed better play back with a 10 second buffer. Its name is, "Screen Encoding For Free Silverlight Streaming With 10 Second Buffer (Karl Shifflett)."

Notice the Total Bitrate of 282Kpbs. This is the key to using the free Silverlight Streaming service. This value must be under 300KB. For fun, select the other profiles and see the vast difference in the output bitrate.

Next select the Output tab, highlighted in red.

The Thumbnail option is pretty cool. You can have Encoder make a thumbnail for you that will be displayed in on the web page this is hosting your Silverlight application. You can also adjust the size of the thumbnail.

The Job Output option is a super feature! The Template option, allows you to choose the video player that will be outputted with your video. I use Glassy in the article download because it has a full screen button on it.

After the encoding process is finished, the button is the last red area will be enabled. This will open the output directory with your new Silverlight application.

After you are happy with the above settings, press the above Encode button. This is what starts the encoding process.

Packaging Your Screen Capture Using Included Files

This section assumes that you are using the files included in the download for packaging your Silverlight Application.

Silverlight Streaming is more than just a video file. When you upload, you are actually uploading a Silverlight application. It is that application that users interact with to view your video.

If you fully understand this whole process, know how to write you own video player great. But I suspect that most developers, including me, are not up to speed with all this yet. So I have included everything you need to upload your projects in the download load for this article.

I used Microsoft Expression Encoder to generate the included files. If you don't like the media player I've included, then you can download Expression Encoder and select a different media player when you Encode your file. Then just use the files that Expression Encoder outputs. I chose this media player because it has a Full Screen button, along with the playing time of the video. I'm sure I'll be creating another player in the future, but for now, this will work just fine.

You will want to create a separate directory for each of your video files. Now if you are an advanced user, you can provide many video files in one upload and then explain to your users how to select the different videos. This is where learning about Chapters comes into play. Some of the media players support the Chapter feature. For the purpose of this article, I'm going to keep things as simple as possible and suggest you upload a single video with your application.

After creating your directory, copy the Silverlight application files from the download to your new directory. Ensure that your encoded video is also in the directory and proceed.

The above files fall into one of three groups, Group A: Just Use Me, Group B: Edit Then Use Me and Group C: Your Video.

Group A: Just Use Me

Just use the files I have provided as they are. They are the, BasePlayer.js, manifest.xml, MicrosoftAjax.js, player.js, player.xaml, PlayerStrings.js.

Group B: Edit Then Use Me

You MUST edit the StartPlayer.js file and change the name of the video to play to your video name. Optionally, you can set the initial volume level.

Open the StartPlayer.js file up in Notepad.exe. At the very top of the file, locate the CHANGE_NAME_HERE text and replace it with the name of your video file.

At your option, you can change the initial volume level by changing the volume from 1.0, to another value. In the above image, I have set the initial volume level to 0.5.

Save the file. This these are the only changes you need to make.

Group C: Your Video

This is your encoded .wmv video file, not your screen capture video source file. You do not upload the source screen capture video file, just the encoded file from the previous step.

Hint: if you're using Vista, you can navigate to the file using Windows Explorer, then click on the .wmv video file and read all the file metadata in the bottom pane of Explorer. This displays things like the Size, Frame Size, Frame Rate and Data Rate. This is a good double check of the video file before uploading to Silverlight Streaming.

After you get all the files in the directory, then zip or compress them all into a .zip file archive.

Let me say something about naming conventions. Inside my ...\My Documents\Camtasia Studio directory, I have a Silverlight sub directory. Each video has its own sub directory under the Silverlight sub directory. I name the video the same name as the sub directory it's in. I name the .zip file archive the same name as the sub directory. When you upload your archive to Silverlight Streaming, you will be ask to provide an application name. I use the sub directory name as the Application Name also. This makes it real easy for me to keep things in sync.

Packaging Expression Encoder Output Files

Above is a sample of the output from Expression Encoder. This Expression Encoder provides a Silverlight application as its output. You can't send all these files to Silverlight Streaming. Also there is a Silverlight Streaming required file that is not included in the output files.

You MUST copy the manifest.xml file from the article download into this directory.

Then select each of the highlighted files AND the manifest.xml file and zip them up or use the Compress Folder utility.

You will not need to edit any of the outputted files, just follow the above instructions to the letter.

The .zip file will be the file that you now upload to Silverlight Streaming.

Uploading Your Screen Capture

Microsoft has made the process of uploading your Silverlight Application very easy. First go to the Silverlight Streaming Account Page. After logging in, click on the Manage Applications link on the left. The Manage Applications page is where all your uploaded Silverlight applications are. To upload a new Silverlight application, click the, "Upload a Silverlight Application" link.

On the, "Upload Application" page, you will enter your Application Name and then browse to your .zip archive file for this application and then press the Upload button. Very simple process.

After your upload has been process by the server, you will be taken to the Application Properties page, where you can update, test or delete this application. There are also instructions for embedding your Silverlight application in your web page. If you use the methods in the next section, you won't have to use their technique.

In other words, a link is much easier to place on a page than all the other code they suggest. Also, Code Project does not currently have direct support for Silverlight Streaming applications, we need to use the link method for now.

Notice how Microsoft has placed all the relevant Silverlight Streaming links right on the above page. This makes it very easy to get the information you need.

Consuming Your Screen Capture

There are three methods that I know of to expose your Silverlight Streaming application to the world. The technique you use is largely driven by the web site, web page or blog policies and what types of tags they allow you to use on their system and if you have access to upload files to the server.

No matter which technique you use there are three very important pieces of information you must have.

First is your Silverlight Account number. If you forget this, you can always click on the Manage Account link on the Silverlight Streaming page. (same page as the above section).

Second is your application name. You'll need the application name so that you can link to it.

Third is the Account Key. This is used when interacting with the Silverlight Streaming service via the REST API. You will not need this for our simple methods below. If you forget this, you can always click on the Manage Account link on the Silverlight Streaming page. (same page as the above section).

On 11 Feb 2008, Code Project released a new custom tag that article authors can use to host Silverlight Streaming videos players directly there articles. The following is the format for the new tag.

<silverlight width="200" height="350" src="{relative path to video on live.com}" />

If your Silverlight video is at:

http://silverlight.services.live.com/invoke/48184/MoleIntroduction/iframe.html

then your tag would be:

<silverlight width="200" height="350" src="invoke/48184/MoleIntroduction/iframe.html" />

If you are going to host a video inside an article, as opposed to providing a link as described in the below section "Anchor Tag Method," there are some things you should know and do.

Things You Should Know

• If you embed your Silverlight video as in the above example, unless you have programmed your player not to, the Silverlight video will start playing as soon as the page plays. This is not a good thing.
• Second, if you set your player to not autostart, it will still go ahead and download the video. This is even worse because the web page is loading, the video player is not playing and the video is downloading. This takes up a lot of bandwidth. Also, the user may not ever play the video, especially on a Code Project article. Example, every time you enter a comment at the bottom of the article and post your reply back, the video will either start playing or start its downloading again. Not good.

Solution

I'll be the very first to admit, I'm not a real Silverlight programmer, yet. I'm waiting for the public release of Silverlight 2.0 to dig in.

If you are a Silverlight programmer and understand the player.xaml and JavaScript, you can do a much better and more customized job than I did. Go for it.

However, what I have done works, it's easy and meets the requirements for developers that want to host a video player in their articles and have not yet ventured into Silverlight land.

I wanted to provide a solution to the above problems, because it could be a real problem if articles were playing videos without command or downloading video content that will never get viewed.

The solution I came up with was to provide a modified Silverlight Player and JavaScript files, that do not start or load the video until the user presses the "Click To Play" button in the center of the player. (the article download has been updated to include this.)

Additionally, this modified player has been programmmed to load an image that must be named, "placeholder.jpg." This image will be loaded by the player and displayed. Below is my placeholder.jpg displayed in the player, awaiting the users mouse click on the button.

After the user clicks the "Click To Play" button, that button and the placeholder.jpg image will disappear, the video will start loading and will start playing.

Required Steps

• Use the template files from the SilverlightCodeProjectTemplateApplication folder in the download. This has almost the same files as the SilverlightTemplateApplication. The differences are:
  • There is a sample placeholder.jpg file. You can, either replace it with your own image, you can modify it as you desire, you can use it as is, or you can simply not include it in the upload.
  • The player.xaml file has been modified to support the "Click To Play" button and has the placeholder.jpg file set has the placeholder image Source properyt..
  • The StartPlayer.js file has been modified quite a bit. When you edit this file, you still must change the file name of the movie to your movie file name.
  • When you create your package, just remember to include the placeholder.jpg in your .zip archive that you'll be uploading to Silverlight Streaming.

Notes

Keep in mind the reason for all this. You do not want to start the downloading of the video content until the user presses the, "Click To Play" button. Since the player has no content until that button gets presses, we must provide an external image to display, if we want to display a preview or title page of the movie.

I could have accomplished the above several different ways. All of which would require editing of JavaScript files. I felt it much simpler to name your placeholder image, placeholder.jpg. You can always edit the player.xaml file and change this, or you could edit the StartPlayer.js file and load the placeholder image in JavaScript code. I tried to come up with the easiest method possiblet. You of course are free to have it your way. If you come up with a better, simpler method, please let me know so I can update the article.

Anchor Tag Method

This is the technique you will use for your Code Project articles. You can also use this same technique for your blogs and other web pages.

<a target="_blank" href="http://silverlight.services.live.com/invoke/999999/ApplicationName/iframe.html">Application Friendly Name Video</a>

This is the very familiar HTML anchor tag. There are three pieces of this tag you must edit.

999999 - place your Silverlight Streaming account number here.

ApplicationName - place the Silverlight application name here. There are no spaces in your application names.

Application Friendly Name - this is the text the user will see when viewing your web page. I like to include the word Video at the end of my friendly names to make it clear to the viewer what the link does.

You can also display a small video or movie image next to your link. Feel free to use the image from the top of this article on your pages or use another one. Maybe Code Project will update their CSS file and add this image to the available classes you can apply to the <li> tag so that the image will be displayed automatically.

If you really want a preview image for your video, then upload an image and wrap the <img> tag with the above anchor tag. To do this, your place the <img> tag, where the Application Friendly Name is.

Take a minute and look back to the top of the article and see how I presented the video links. You must tell the web page visitor that this is a Silverlight application, provide instructions for using your viewer, etc. Feel free to use the above images on your articles. Later on when better media players are available, we can probably drop all the example usage stuff. Hey, maybe someone who reads this article will write a cool Silverlight media player that has ToolTips and post an article here on Code Project for us. I'll do one when Silverlight 2.0 comes out but for now, will be happy with the Silverlight 1.0 player Microsoft provided.

IFrame Tag Method

Please note, this technique is not currently supported here on Code Project. This technique is supported on WordPress.com blogs.

<iframe height="600" scrolling="no" width="800" frameBorder="0" src="http://silverlight.services.live.com/invoke/999999/ApplicationName/iframe.html"></iframe>

999999 - place your Silverlight Streaming account number here.

ApplicationName - place the Silverlight application name here. There are no spaces in your application names.

You can change the size of the IFrame. But, remember that you wanted your video size to be 800x600 or 1024x768 right? This is another reason I like the link method. I don't want to take up a huge amount of screen space on my articles and blog entries. Additionally, I want the viewer of my videos to be able to resize their browser and have the video player resize. Yes, they can always use full screen, but more options make happier users.

JavaScript Method

There are complete instructions and three code snippets on the Silverlight Application Properties page. You will need to edit your web page to use this technique. This technique does not work here on Code Project and I'm pretty sure this won't work on my WordPress.com blog since you have to place an edit .js file in the directory on the server. I'm sure that a .js file is not an approved upload file type for WordPress.com.

References

Here is a list of all the web pages I read and gleaned information from. Not in any particular order, but all good sources of information on this emerging technology.

• http://silverlight.live.com/
• http://rhizohm.net/irhetoric/blog/35/default.aspx
• http://www.rhizohm.net/irhetoric/blog/30/default.aspx
• http://timheuer.com/blog/archive/2007/09/11/expression-encoder-custom-templates.aspx
• http://visuallounge.techsmith.com/2007/10/camtasia_studio_v5_sneak_peek_5.html
• http://blog.jonudell.net/2007/09/24/silverlight-for-screencasters/
• http://weblogs.asp.net/scottgu/archive/2007/05/17/tip-trick-supporting-full-screen-mode-with-silverlight.aspx
• http://www.silverlightexamples.net/post/Silverlight-Can-Go-Full-Screen-and-Back.aspx
• http://www.microsoft.com/windows/windowsmedia/forpros/encoder/faq.aspx
• http://www.microsoft.com/windowsxp/using/windowsmediaplayer/expert/bridgman_03october13.mspx
• http://www.microsoft.com/expression/products/overview.aspx?key=encoder
• http://www.microsoft.com/windows/windowsmedia/forpros/encoder/default.mspx links to all Microsoft Encoder products
• http://silverlight.net/Learn/ Learn Silverlight here. Great tutorials, create you own player!
• http://silverlight.net/blogs/jesseliberty/archive/2008/01/27/did-you-know-you-can-create-a-silverlight-streaming-application-in-minutes.aspx
• http://timheuer.com/blog/archive/2007/12/18/creating-silverlight-media-player-skins-expression-encoder.aspx

Summary

I hope that you have learned a little about the process of creating screen capture videos. I look forward to watching your videos on your articles here on Code Project and your blogs.

One person who has done a great many tutorial videos is Mike Taulty of Microsoft UK. He is the master of making short tutorial videos. Keep in mind that Mike and the other Microsoft video casters do not have the same bandwidth limitations that we do as far as getting free Silverlight Streaming. However, if you follow the techniques in this article you can deliver very good quality videos to your viewers, "just like Mike."

If you run into a problem, recheck the article to ensure that you followed the directions, perhaps watch one of the provided videos again. That failing, please leave a comment below and I'll do my best to help you.

If you need help with Camtasia, please refer to their outstanding documentation, training videos and tech support. This is one company you can call and they will help you. They provide outstanding tech support for their products.

History

• 25 Jan 2008: Initial Release
• 27 Jan 2008: Provided profile and directions and video for using Expression Encoder.
• 28 Jan 2008: Provided additional profiles that use a 10 second buffer for better playback. Updated the references section.
• 28 Jan 2008: Added sample videos encoded using a 10 second buffer instead of the default 5 second buffer.
• 12 Feb 2008: Added section to article on embedding videos in Code Project articles. Added video showing how to embed Silverlight Streaming video into Code Project articles using the new Code Project <silverlight> html tag.
• 14 Feb 2008: Modified the section on editing the StartPlayer.js file, showing how to edit the initial volume levels. Also added section to the Silverlight Introduction section at the top of the article, bringing the light the potential isses of the initial Sivlerlight volume levels playing at a very high volume level.