[Mini-Tutorial] Create Your Own Video Play Experience

In my last mini-tutorial, I showed you how to publish Silverlight video experience to Silverlight streaming using Expression Encoder. In this tutorial, I'll show you how to create your own video player template and reuse it on your blogs or websites. The process is very straight forward and you can leverage a lot of exciting templates to build your own video player. No coding is necessary unless you want to code! :-)

Here are the major steps to create your own video player template for Expression Encoder:

1. Start off by choosing an existing player from the Encoder template folder, which is  located at C:\Program Files\Microsoft Expression\Encoder 1.0\Templates\en folder. An advantage of using an existing player template is that all the necessary files are there. All you need to do is changing the player interface. All the player controls should be already working.
2. Save a working copy of the chosen template (I'll refer it as "working template folder" later on) to your desktop or your preferred location to edit.
3. Open the template project in Expression Blend and edit the player.xaml file in Blend to your own look. Save the project in Blend!
4. Final fixes:
   • Change the Default.html file in the working template folder. Give an appropriate name to the template. The name will up in the template list in Expression Encoder.
   • Change the StartPlayer.js. Make sure the AutoPlay attribute is set to "false" if you don't want the player to play right away when the webpage loads.
   • Update the Preview.JPEG in the working template folder with the new template look.
5. Paste the working template folder into C:\Program Files\Microsoft Expression\Encoder 1.0\Templates\en folder
6. Restart Expression Encoder. Now you have your own template in the Encoder template list and you can reuse it many times.

Feel free to download my MapleLeave player template here. I renamed it to be "CanUX2."