Click here to Skip to main content
Click here to Skip to main content

Creating, Encoding and Delivering Silverlight Streaming Screen Capture Videos

, 14 Feb 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
An in-depth article on the process of creating screen capture videos for your Code Project articles and for your blog. Article will cover creating, encoding, packaging, uploading and consuming screen cast tutorial videos. Updated 2-13-2008 code download and new video on embedding videos.

New Section and Video Added - 2/12/2008

See new section on Using Silverlight Videos in Code Project Articles

Please view the new Silverlight video, "How To Embed a Silverlight Video in Code Project Articles."

Introduction

They say a picture is worth a thousand words, so I wonder where a 10 minute tutorial video fits into this word-picture business. Don't think anyone will watch your training videos, think again. In two weeks, I had 2067 views of my low quality YouTube videos. I was amazed at the response. With that kind of response, plus a need at work, I decided to get deep into the on-line screen capture tutorial videos and figure this all out once and for all.

This article will document in detail the entire process of creating, encoding, packaging, uploading and consuming screen capture tutorial videos on Code Project articles and you blog. I strongly suggest that you read every line of the article. To put it mildly, every line "is" the fine print. This is a detailed process and you need to understand how all the parts fit together and why.

Article Videos

The video links require Microsoft Silverlight 1.0. If you do not have it, you will be prompted to install it when you click one of the links. After the short installation is completed, close the browser window that you did the install in and re-click the video you want to watch. You can also download it here. Windows XP or Vista required.

FYI: Each link has a ToolTip containing information about the video.

I have noticed the Silverlight Streaming service speed can vary. So I'm trying something out. I have encoded two sets of videos. One set using a 5 second buffer, the other using a 10 second buffer. Let me know what you think. I have included both profiles in the download for encoding at these buffer sizes.

Silverlight Potential Audio Volume Issue

I received an email this on 2/14/2008 from Chris Maunder, the Co-founder of Code Project about the initial volume level of Silverlight videos. On some systems the player has a very high initial volume level. The Silverlight Team is aware of this and is working on it.

The Silverlight forum discussion thread on this issue can be read here.

After reading the thread, it seems that most people with nVidia drivers are having most of the problems.

All my systems use nVidia drivers and I have not had the problem. The suggetions in the foum post mostly revolve around updating the motherboard chipset and audio card drivers.

Additionally, I have modified the edit StartPlayer.js file section below to show you how to alter the startup volume of your Silverlight video player applications.

Videos Encoded With 5 Second Buffer

How To Produce And Encode Video

How To Package Silverlight Applications Video

How To Encode Screen Capture Videos Using Expression Encoder Video

Videos Encoded With 10 Second Buffer

How To Produce And Encode Video

How To Package Silverlight Applications Video

How To Encode Screen Capture Videos Using Expression Encoder Video

How To Embed a Silverlight Video in Code Project Articles

Just click the, "click To Play" button and then go full screen after the video begins playing.

I've provided two methods here in the article for displaying videos to the user, links and embedding.

Silverlight Video Player

When you click on one of the above links your browser will open a new window and display the video player. You can resize your browser window and the video player will resize with the browser. You can also click on the Full Screen button on the video player controller. Additionally, single clicking the video will pause it. Double clicking the video is another way to switch to Full Screen mode.

Assumptions

This article assumes the following:

  • You want to produce high quality screen capture tutorial videos.
  • You want the video hosted and streamed for free.
  • You are OK with using Silverlight as your video player.
  • You understand that your videos are limited to 10 minutes each at a bit rate of 300KB.
  • You are willing to use Camtasia 4.0 or 5.0 or Microsoft Expression Encoder to produce and encode your videos.
  • You want to be a video making Rock Star!

If you have different needs, then these technique may not be for you. Tech Smith offers a 30 day Camtasia Studio trial download. After that you need to purchase it. If Camtasia in not in your budget, you can use another free or cheaper screen capture software product, record your video and then send it to a friend to have them produce it for you using Camtasia. I'll get into much more detail and explain why this is currently the best route for video production and encoding.

Requirements

Ensure that you install Windows Media Player version 11. This ensures that you have the latest Windows Encoder 9.0 installed on your computer.

Overview

Please read this section. In this section, I'll review the process as a whole. I'll explain the issues surrounding the decisions to use certain software packages and why other software or techniques were not used.

When I get to the next major section that gives step by step instructions, I won't be repeating this overview information.

Why Microsoft Silverlight Streaming?

Ever since I produced and uploaded movies on YouTube for Mole For Visual Studio I have been looking for a way to make the quality much better, have the capability to resize the video and go full screen too. I didn't want to spend money each month with some of the services that are out there, because I just didn't know what it would end up costing me.

Earlier this week I gave a presentation at the Charlotte Enterprise Developers Guild meeting on developing visualizers and Mole. After the meeting Brian Hitney from Microsoft told me about Silverlight Streaming. That I could host my videos for free. So I set up my Silverlight Streaming account and began reading all the documentation and blog posts I could find.

During the process, read Karsten Januszewski blog post: Using Expression Encoder For Screencasts. He also references several sources that have helped him get started.

Currently Microsoft will give you 4GB of space but limits your videos to 10 minutes at a bit rate of 300KB. This is all for free. Ten minutes is a good length for a tutorial video. You can always create more if you have a longer topic. There is just no comparison with the videos I have created and posted on the Silverlight Streaming site to the videos I posted on YouTube. I'm sure that YouTube will be upgrading and making changes, but for now, Silverlight Streaming is king and can I say it again, it's free!

This quote is directly from the Silverlight Streaming home page.

"While the product is in pre-release, storage and delivery is free up to 4 GB, with outbound streaming up to 700 Kbps. As we move out of Beta, developers/designers will have continued use of the service with up to 1 million minutes of free video streaming at 700 Kpbs per site per month. Unlimited streaming will also be available for free with advertising, or with payment of a nominal fee for the service for use without advertising."

This quote is directly from the Silverlight Streaming FAQ page, question, "How much storage do I get and what is the bit rate?

"A user receives 4 GB of free storage for Silverlight Streaming applications. Each media element in a Silverlight Streaming application cannot exceed a 10-minute uninterrupted video stream at 300 kilobit/s. The peak outbound bit rate for Silverlight Streaming is 700 kilobit/s. As the limit is set based on byte size instead of duration, by using the full bandwidth of 700 kilobit/s, the video will be truncated to approximately 4 minutes."

This quote is directly from the Silverlight Streaming Upload Application page.

"Specify the file to upload using the "Browse" button, then click on the "Upload" button. The file must be a valid Zip archive defining a Silverlight Application with its manifest. If the Silverlight application contains a video, the video file must be smaller than 22 MB. This is equivalent to a continuous video stream of 10 minutes at 300 Kbps. If the video stream is encoded at any higher bitrate, it will have to be shorter than 10 minutes. For example, if the video stream is encoded at the highest allowed bitrate of 700 Kbps, the maximum length of the video is just below 4.3 minutes."

This is where I got the 300KB limitation from. So, I'm not sure which quote is the most correct or if the first quote reflects the way things will be in the future, i.e. a 700KB limit all the time.

So for now, we must respect the 300KB bit rate limitation. If and when this changes, I'll update this article and provide techniques for the new bit rates.

I was up late one night writing this article (1/24/08) and did notice that my snappy videos slowed down a good bit. This service is still in beta so there may be periods like this.

Creating Your Screen Capture

Using Camtasia Studio v4 or v5 you record your awesome tutorial screen capture video. The screen capture video can be up to 10 minutes in length. This is the limit imposed by Microsoft for free Silverlight Streaming. With the techniques I'll demonstrate here, you can record screen regions with dimensions up to 1024x768.

Priority one is getting free video hosting and free video bandwidth for streaming your videos. If you have access to your own servers and bandwidth, then a lot of my techniques don't apply since you can make longer videos that consume more bandwidth. However, for screen cast videos, if you follow these techniques, the bit rate will be a solid 250-290KB. You will be amazed at how great your videos will look even at this very low bit rate. They download and start real fast too. So even if you have more bandwidth, why use it, if you can get 250-290KB to accomplish the job?

I would be remiss if I didn't tell you about the inexpensive screen capture software BB FlashBack Express. This $39.00 product allows screen capture videos to be made. This stripped down express version does not edit the videos, but at least you can record them.

After you have recorded your screen capture video, you will need to export it to an .avi file. Both Camtasia and BB FlashBack Express support this export format. When you perform your export, you will need to set a few settings.

First is video frame size. Ensure that that your export frame size is the same or desired size. If you recorded a 1024x768 video, verify the export size is 1024x768.

Second you must set the export frame rate (fps) to 5.

Encoding Your Screen Capture Using Camtasia or Microsoft Expression Encoder

Encoding is the process of taking your exported .avi file and encoding with the correct encoder so that it is compatible with Microsoft Silverlight Streaming service.

As a point of example, if you use the standard Camtasia v4, .wmv encoder preset, the resulting file will not work with Silverlight Streaming. If you use the preset profile that I have provided with the download and have provided instructions for its use, the encoded .wmv file will be compatible with Silverlight Streaming.

This was the very difficult piece of the puzzle and took a good bit of time to resolve. The reason this is difficult is that both Camtasia Studio and Microsoft Expression Encoder do not come with preset profiles that are compatible with the Silverlight Streaming service. Remember, Silverlight Streaming service currently has a bit rate limitation of 300KB and maximum single video size of 22MB.

I have provided the necessary preset profile (.prx) files for both Camtasia and Expression Encoder in the article downloads. There is also a video on using Expression Encoder, that I strongly recommend that you watch.

I did try to use the Windows Media Encoder 9.0 free software to perform the encoding but I kept getting message boxes, telling me I didn't have the right encoder installed. So I gave up. I was even using the same profile in the download. Maybe someone from the Windows Media Encoder team at Microsoft can provide instructions for encoding videos that will be compatible with the 300KB limitation.

In the included profiles if have cranked the frame rate all the way down to 5fps. Full motion video is normally 30fps. Remember we want great quality but only have a 300KB data rate to play with. But we are not doing full motion video. We are doing screen capture tutorials, we are explaining details of our applications or showing how they work. So the screen does not change much. This is why we can get away with a 5fps frame rate and still have good quality videos.

I've also set the audio to 32kbps, which is a 44kHz mono rate. The audio is great with low bandwidth consumption.

I have included the Camtasia and Expression Encoder preset profiles that are necessary to encode your videos in the article download. You can of course modify these to further suit your needs. I have also included the file that I got from Camtasia, but mine works better because it ensures that the bit rate never gets above 300KB.

To edit these .prx files, you'll need to downloadWindows Media Encoder 9.0. Take note that there are x64 and x32 downloads. There is a utility included in the download called, Windows Media Profile Editor. Use this program to edit the .prx files.

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.

editstartplayersettings2.JPG

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).

Inside Code Project Articles

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.

placeholderimage.JPG

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.

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.
The article downloads included three profiles for Camtasia and two profiles for Expresson Encoder. You will need to copy these profiles to the correct directories. There is a, "Read Me Now.txt" file in the download with copy instructions.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Karl Shifflett
Architect Gayle Manufacturing Company
United States United States
Karl loves .NET, WPF, WCF, ASP.NET, VB.NET and C#.
 
Awards:
 
  • December 2008 VB.NET Code Project Article Award
  • 2009 Code Project MVP
  • 2008 Code Project MVP
  • 2008 Microsoft MVP - Client App Dev
  • December 2007 VB.NET Code Project Article Award
  • Gold Medal Winner at IBM's 1998 PROIV Programming Contest in Las Vegas
Click here to check out my Blog
 
Click here to learn about Mole 2010 debugging tool for Visual Studio 2010
 
Click here to read about XAML Power Toys
 

Just a grain of sand on the worlds beaches.

Follow on   Twitter

Comments and Discussions

 
QuestionNeed help with Silverlight-compatible Screencast tools Pinmemberprabhuv20-May-10 6:41 
AnswerRe: Need help with Silverlight-compatible Screencast tools PinmemberKarl Shifflett20-May-10 6:50 
GeneralSnap at a time of Upload the file. Pinmemberhumill_MCA19-Feb-10 22:49 
GeneralGreat article PinmemberDaniel Vaughan21-Nov-09 5:37 
GeneralRe: Great article PinmvpKarl Shifflett1-Dec-09 18:33 
GeneralRe: Great article PinmemberDaniel Vaughan2-Dec-09 1:01 
GeneralNow Microsoft Expression Encoder has its own screen capture PinmemberMember 459062230-Jul-09 12:35 
GeneralRe: Now Microsoft Expression Encoder has its own screen capture PinmvpKarl Shifflett31-Jul-09 3:23 
Generalset audio source to left or right PinmemberMember 40204893-Mar-09 17:03 
GeneralRe: set audio source to left or right PinmvpKarl Shifflett4-Mar-09 4:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 14 Feb 2008
Article Copyright 2008 by Karl Shifflett
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid