Encode using Silverlight templates

Microsoft Silverlight templates are the heart of Microsoft Expression Encoder functionality and are what enable your encoded videos to take advantage of the visual and interactive richness of Microsoft Silverlight technology. This makes Expression Encoder an ideal tool for creating projects that immerse viewers in the full Silverlight experience. For more information about Silverlight technology, see the Silverlight Home page and visit the Silverlight Community page.

To encode using templates, you select the template that you want to use in the Output panel, and this template specifies a particular skin that will encase your video. This skin can be one of any number of stylized designs that include playback elements. These elements greatly enhance the interactivity and feel of your video. Once you have encoded a video using a template, the video opens in your browser for playback, where you can then preview it.

If you want to experiment with several templates in order to test their look or functionality, you can do so very quickly. Once you have encoded a video using a particular profile, you can subsequently preview any of the other remaining templates. Just choose a new template in the Job Output panel, and Microsoft Expression Encoder quickly displays your video in the new template. If you changed the template but not the profile, Expression Encoder does not have to re-encode the video, only the template, and so it displays an almost immediate preview.

The templates take advantage of the Silverlight media offerings. This gives your video an interface that is both unique and functional. Some of the elements that templates offer include the following:

  • Playback controls   You can have specially designed and visually compelling playback elements that are far more graphically rich and attractive than the typical Windows Media Player controls.

  • Thumbnails   You can display thumbnails that represent chapters of your video. You do this by setting markers at specific times in your video, and then specifying that those markers appear as thumbnails that display the image that appears at the frame where you put the marker. On playback, the thumbnails are visible and aligned inside the video viewing area, where users can then click them to navigate your video.

  • Text display   Depending on the template that you use, at certain points in your video, you can display marker text or text specified by scripting commands. This text could be anything from a chapter title to a subtitle. This feature enables you to quickly add stylized characters to your video.

  • High-quality dynamic resize   Because Silverlight uses vector-based graphics for its design, resizing a graphic element does not degrade its resolution. Therefore, you can resize your browser window and the skin, and the video will resize dynamically without a loss of the design resolution.

  • Multiple video playlists   If you have a job that contains more than one video, when you encode it using a template, all videos will render to the same page and you can play them individually or in tandem. Depending upon the Silverlight template that you use, you can also generate a gallery where all of your videos are represented by thumbnails and you can quickly switch from one to the other by clicking a thumbnail.

When you use Expression Encoder to encode using a Silverlight 1 template, it creates the following files:

  • An HTML index.

  • A XAML (Extensible Application Markup Language) file that contains code describing the template design.

  • JavaScript files for each template element.

When you use Expression Encoder to encode using a Silverlight 2 template, it creates the following files:

  • An HTML index.

  • A XAP (Silverlight-based application package) file and the corresponding source files for the XAP file.

You can choose to have Expression Encoder automatically create a named and dated folder to store these files, or you can specify an existing folder in which Expression Encoder can store them. When you embed a movie in your website, you must upload the whole folder.

Before you perform the following task, you should do both of these steps:

  • Decide if you have to trim, crop, change the dimensions, or adjust the pixel aspect ratio of your video. For more information, see Resize video.

  • Set an encoding profile. You can either use a default profile, or you can create a custom profile. For more information, see Define a default profile or Custom profiles.


If you choose an H.264 profile, then you should not choose a template because Silverlight doesn’t currently support MP4 output playback.

To encode your video using templates

  1. If you cannot see the Output panel, on the Window menu, click Output.

  2. In the Job Output category, set these options according to the following descriptions:

    • Template   If you want to use a template, choose one from this menu. You can only apply one template per job.

    • Preview   See a preview of your template in this area. You can quickly preview all the templates by pressing the UP ARROW or DOWN ARROW keys. To see a full-size preview, click the preview image.

    • Media File Name   You can type a file name or choose an expression that extracts the file name from a specified field in the metadata. To choose an expression, right-click the field and choose an expression on the shortcut menu. The field reverts to using the original file name and the default extension for the type of encoding profile that you chose. You can only choose from the expressions in the shortcut menu. Make sure that the metadata field that the expression refers to contains fewer than 220 characters.

    • Directory   Type the path of the location where you want to save the job or click Browse and browse to a file location.

    • Open Job   Click this button to open the job output folder.

    • Reset   Click this button to reset all values to their defaults. Expression Encoder also scans the template folders again and rebuilds the template list.

    • Preview in browser   Select this option to launch an ASP.net server and open your default browser to display your video when the encoding is finished.

    • Save job file   Select this option to save an XML file of the job to the job target folder.

    • Sub-folder by Job ID   Select this option to create a folder that contains all the files that are generated when you encode using a template. When encoding, Expression Encoder creates a folder that uses the naming convention MACHINENAME DATE TIME. If you clear this box, Expression Encoder puts the files in a folder that you specify.

  3. To access the advanced properties, click the Show/Hide advanced properties button Cc294611.2f8a79a9-68d2-4878-8b75-c76ceb921b3b(en-us,Expression.10).png and set these options according to the following descriptions:

    • Cue Video on page load   Specifies whether you want the browser to download and cue a video when the page loads. If you select this option, the browser will download the video and display the first frame, or a thumbnail, if you specifed one. If you do not select this option, the browser does not download and cache the video and, instead, displays a Start button that the user must click to download and play the video.

    • Automatically start video when cued   Specifies whether the video automatically begins play when it is downloaded. Select this option if you want the video to begin playing on download. If you clear this option, the video will still download and display a frame, but will not play the video until the user initiates playback.

    • Allow closed captions to show   Select this option if you want the viewer to be able to view closed captions.

    • Mute player on start   Select this option if you want the video to launch with audio muted. The viewer can then choose to activate the audio.

    • Stretch Mode   Specifies how the browser will stretch the dimensions of the encoded video.

    • Player background color   Select a color that will appear in the browser as a background, and along the border of the video. To select a color, you can click in the color strip, click the color swatch, enter RGBA values (or drag them to change the values), enter hexadecimal numbers, or click the eyedropper and select a color from the interface.


    Expression Encoder writes the parameters you choose for the advanced properties to the Default.html file for the template. You can also manually edit those parameters. To access the file from Expression Encoder, click the white box next to the Template menu and choose Open Template Location. Right-click the Default.html file and, on the shortcut menu, choose to open the file in Notepad.

  4. When you are ready to encode your video, in the Media Content panel, click Encode to encode all the videos in the job. To encode only one video, right-click the video that you want to encode and, in the shortcut menu, click Encode Selected Item.

  5. If you want to pause the encode momentarily to perform other tasks, click Pause. Click Resume to restart the encode from the point it paused. Click Cancel encode to end the encode.

Community Additions