Category: Expression Media Encoder

Categories
Expression Media Encoder Microsoft Expression

Expression Media Encoder Woes

To put videos in a Silverlight application you have to use Microsoft Expression Media Encoder. This program has great potential but there is one annoying little problem that drives me crazy: It’s damn near impossible to get an export to the file size you want.

The problem originates from the 22mb size limit of video files uploaded to Silverlight Streaming. As you can see on this blog my video tutorials are intentionally large to give the viewer a good view of the screen and as a result so are my files. To solve this I tried to muck around with the different settings in the right hand panel. This turned out to be a massive headache:

First off VBR (Variable Bit Rate) crashes the application every time forcing the use of CBR (Continous Bit Rate?) which causes the files to become unnecessarily large. This is not due to my system (I edit videos using Premiere on a daily basis and export them to a variety of different formats) but might have to do with the input file so I’ll leave it pending further testing.

estimated.jpgSecondly the estimated size panel is all over the place. In the 50 or so times I’ve exported something from the program this number has never been anywhere close to the actual final size. The last video I posted had an estimated file size of 68MB while the actual export was 21.9MB. Needless to say this is just a bit confusing. Unfortunately with this estimation being off there is no way of knowing what the actual output file size will be so you are left with random experimentation.

Here is a short list of things that don’t work if you are trying to reduce the size of your file:

  • Changing the video bit rate alone has little to no effect
  • Changing the audio bit rate has minor effects
  • Changing the video size has an effect but only as long as you don’t change the video profile size – this will override the former
  • Using CBR doesn’t work, at least not for me
  • Changing key frame intervals seems to have little effect

The only thing I’ve done that does make a difference is reducing the size of the final output and drastically reducing the bit rate of both audio and video. My original file was 1024 x 768 and I originally wanted to export it at 800 x 600. No matter what changes I made (reduce bit rate, increase key frame interval, reduce quality, reduce smooting, 2 pass encoding, you name it) the file insisted on being either 25MB or 46MB with very little variance between them. The file only landed at 21.9MB when I reduced the video bit rate to 400, the audio bit rate to 48 and the video size (using the Video Profile area) to 600 x 448. This was an acceptable compromise and because Silverlight video is scaleable it was satisfactory.

So, to sum up: It seems (at least for now) that the only variable that has any significant impact on final file size is the video size. This should be changed in the Video Profile area because it allows for locked aspect ratios. Pending further experimentation I therefore advise you to screw around with the size of your video before you touch any of the other variables as they seem to have little impact on the outcome.

Categories
Expression Design Expression Media Encoder Expression Web Microsoft Expression Video Tutorials

Video Tutorial: Editing and Uploading the Zufall Side Buttons


Click here for a full screen version of this video.
Here (finally) is my second video in the Zufall series. It was meant to be a walk-through of the implementation process but then I ran across a small problem and decided to make a video about how I fixed it instead. Zufall part II about Expression Web is still on it’s way but this should tide you over.

In this video I demonstrate how I created the side buttons using Expression Design and how to do some quick alterations to the site in Expression Web using the fantastic CSS features. It’s quick and dirty but should give you a small glimpse of how to do things.

The reason why it’s taken so long for me to post a new video? Expression Media Encoder is damn near impossible to use! I’ll be ragging on this in a separate post once my head cools but just to give you a small taste it took 17 tries to get the video above to export to below the magic 22mb that is required for Silverlight streaming. And it wasn’t for lack of trying. But like I said, more on that later. For now I hope you get something out of my most recent video and be sure to check back for more.

Categories
Expression Media Encoder Microsoft Expression Silverlight

Posting a Silverlight Application – Major Headache

As I promised I’ve made an in-depth video tutorial on how I created the iZufall.com website using Microsoft Expression Design. The video itself was easy enough to make but I spent several hours today trying to conform it to the stats required to be able to upload it to the Silverlight Streaming Server.

Turns out publishing to the Silverlight Streaming Server and posting Silverlight applications isn’t all that easy. Here’s a “quick” run-through:

Step One: Create a Video
Easy enough. You can use anything to create the video and export it to whatever standard format you want.

Step Two: Conform the Video Using Microsoft Expression Media Encoder (EME)
Should be easy enough. Simply import the video file into EME and tweak the settins until you get the desired result. Only here you have to watch what you are doing. Turns out the Silverlight Streaming Server only accepts wmv files that are less than 22mb. My tutorial is huge (800×600) and over 13 minutes long (because I can’t stop talking). My first export (which took 20 minutes) totaled at 32mb so I was 10 over. With tweaking I managed to get it down to 23mb and finally 17.something. This tedious process took about 3 hours because the estimated size EME projects is completely off the charts wrong (the first time it estimated 70mb, the second 34 and the final one 26).

Anyway, when the video is exported EME spits out a list of files under the export folder. This list consists of the following (in alphabetical order):

  • BasePlayer.js
  • Default.html
  • MicrosoftAjax.js
  • player.js
  • player.xaml
  • PlayerStrings.js
  • preview.jpg
  • Silverlight.js
  • StartPlayer.js
  • YourVideoFile.wmv

The files are under a time stamped folder with a cryptic name like (in my case) “MORTEN 06-08-2007 1.24.08 PM”. I’m sure you can change this but I’m lazy.

Step 3: Upload Your Application to Silverlight Streaming Server
Once you’ve finished and tested your application you can post it on the Silverlight Streaming Server which allows you to post up to 4gb of free content. First you go to silverlight.live.com and create an account and then you log in. Once inside you can upload your application. But wait! Your application isn’t like a Flash .swf file… it’s a whole whack of files! So it’s not as easy as it seems after all.

As is typical I did not read any of the info and just zipped the whole export folder and tried to upload it directly. After waiting for an awfully long time (there is no bar telling you the progress of your upload or if it’s uploading at all) the project was created and I got a message that my archive was missing a file called “manifest.xml”. Serves me right for not reading the manual I guess. Turns out you have to build an xml file called “manifest” and put it in your archive to get your application to work. God knows why this xml file isn’t auto generated by EME since it is the same for all Silverlight Applications but alas it’s not so you have to make it yourself. The script is as follows:

<SilverlightApp>
<version>1.0</version>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>BasePlayer.js</js>
<js>PlayerStrings.js</js>
<js>player.js</js>
<js>StartPlayer.js</js>
</jsOrder>
</SilverlightApp>

In addition the archive should not include all the files from the export. The proper zip archive should include the following:

  • manifest.xml – The file you have just created in the previous step
  • player.xaml – The XAML file correcponding to your Silverlight application
  • *.wmv — Video file(s)
  • *.jpg — Image file(s), thumbnails for the chapter markers and the preview
  • *.js – All the scripts in the Output folder EXCEPT Silverlight.js

Confused yet? I know I was. Anyway. Once this is done you can upload the zip archive and the application will appear on the server.

Step Four: Posting Your Application
Again, if you are used to the relative simplicity of posting Flash content on a site you’ll be frustrated by how complicated it is to publish Silverlight apps. Once the project is uploaded you get a whole pile of code you have to use. I cut the below section straight out of the Manage Application page:

There are three steps required to add this Silverlight application to your web page.

1) Add the following script references to the page header section.

2) Insert the following HTML where you want the application to appear in the body of the page.

3) Save the following script in a new file named “CreateSilverlight.js” and place it in the same directory on the server as the page.

I believe there is an easier way of doing this – I vaguely recall seeing something about using iFrames but I have to do some more research before I can confirm it.

Final Thoughts

Since it took me so long to compress the project and upload it I had to leave my computer to go to my other job so I haven’t been able to test the last step and actually post the video tutorial yet. Hopefully I’ll be able to do this some time tonight so you can take a look at the final product and read my experiences actually posting an app.

For now I’ll just say this: Creating and publishing Silverlight applications seems unnecessarily cumbersome. I know this is just the beginning but for now this is not user friendly in any way. I’m assuming that publishing applications on your own server is easier (and I’ll test this tomorrow) but using the Silverlight Streaming Server is way too complicated for the novice user.

When I have this video and the second half where I demo how I the project went from design to functional website using Expression Web I’ll make another video walking through the process of creating and publishing a simple Silverlight application using Silverlight Streaming Server to make life a little easier for the next person that wants to try it out.

Here are some useful links to sites I used when figuring this whole thing out:

QuickStart: Package a Video File using Expression
Using the Silverlight Streaming Administration Site

That’s all I got for now. Stay tuned for the video tutorial :o)