Export (0) Print
Expand All

Create templates from existing Silverlight players (advanced)

Expression Studio 2.0

A Silverlight video experience is the presentation of high-quality, encoded video content skinned with a graphically rich, interactive playback module. Microsoft Expression Encoder uses templates to create Silverlight video experiences. Templates are a collection of HTML, JavaScript, and XAML that together define the Silverlight video player user interface (UI) and interactivity.

Expression Encoder includes several templates that you can use to present your videos, each template featuring a unique, graphically-appealing video player UI. However, you are not restricted to using the default templates. Because of the extensibility of Expression Encoder, you can create your own Silverlight video player using such tools as Microsoft Expression Blend 2, and then make the player available for Expression Encoder to use as a custom template.

If you have created or plan to create a custom Silverlight player, and you want to add it as to Expression Encoder as a template, there are several changes to the code that you must make for Expression Encoder to recognize the file as a usable template. This topic will give you instructions on how you can successfully convert an existing Silverlight video player into a template. Instruction about how to build a Silverlight player is beyond the scope of this topic.

Expression Encoder obtains templates from two distinct locations on the system:

%programfiles% \Microsoft Expression\Encoder 1.0\Templates\

And, for user-installed templates:

\Expression\Expression Encoder\Templates

Within these template folders are sub-folders that contain the template items which, as previously stated, are typically a collection of files that the designer has created. When creating new templates, you should put them in the latter folder.

Within each file is a mixture of HTML, XAML, or script that the designer has created. In addition, these files contain directives and properties that Expression Encoder interprets and uses when it encodes a job, which is a collection of any number of videos that you have assembled in a single session in Expression Encoder and which you plan to encode. By adding the necessary template directives and job properties to your custom Silverlight players, you can create templates that Expression Encoder can use for your encoding projects.

Template-specific properties, such as the name of the template and the file name of the preview bitmap that Expression Encoder will display, are declared in descriptor blocks bounded by the <$@ and $> tokens. For example:

<$@ Options LaunchPage="true"$>
<$@ Options Name="EME Template for Blend"$>
<$@ Options TemplatePreviewImage="preview.JPG"$>

Every template must declare at least a Name. With the exception of LaunchPage, which must be present in the Default HTML page, you can include directives in any template file.

Job-specific properties such as the encoded video file names, marker thumbnail names, metadata, and so on, are evaluated when the job is encoded by using a flexible string replacement engine that shares some similarities with ASP.NET. The engine is not bound to any particular file type; it is run against all files in the template and can be used to generate custom HTML, XML, javascript, XAML, or any other text-based file type based on properties of the encoding job.

Text in the template files is treated as a literal string with C# code blocks inserted by using the <$ and $> token pair. Within a code block, programming logic can exist; strings can be returned to the template and embedded by using the = operator. As with ASP.NET, flow control logic can be split across multiple code blocks. For example, a template that contains a single html file that has the following code:

<html>
        <$if (PublishedItems.Length<10) {$>
            <p>Your job has <$=PublishedItems.Length $> items<p/>
        <$ } else { $>
            <p>Your job has more than 10 files in</p>
<$}$>
</html>

would generate an output file such as this for a job with three items:

<html>
        <p>Your job has 3 items<p/>
<html>

When Expression Encoder processes the job, it encodes the video files and then evaluates each template file in order to create the job output.

As illustrated here, a simple object model that lets you access and evaluate properties from the encoding job is exposed to the code running in the script blocks. A complete list of objects and methods appears at the end of this section.

Silverlight 1

The following example shows how a JavaScript file generated for Silverlight 1 might be constructed to enumerate and return the encoded files from a job as a JSON list:

//EnumerateItems.js
//Return JSON list of encoded files
function getEncodedFiles() {
    return {"items" : [
    <$ for(int iItem=0;iItem<PublishedItems.Length;iItem++){$>
                { "mediaUrl": "<$=PublishedItems[iItem].OutputFileName$>",
                          "clipThumbnail": "<$=PublishedItems[iItem].ThumbnailPath$>",
                          "chapters": [ <$ for (int iMarker=0;iMarker<PublishedItems[iItem].Markers.Length;iMarker++) { 
                                            PublishedMarker marker = PublishedItems[iItem].Markers[iMarker];
                                            string strUrl = (marker.ThumbnailPath!=null)?marker.ThumbnailPath:""; 
                                            string strSep = (iMarker<PublishedItems[iItem].Markers.Length-1)?",":""; $>   
                                            { "title": "<$=marker.Value$>",
                          "time": <$=marker.Time.TotalSeconds.ToString()$>,
                          "imageUrl": "<$=strUrl$>"} <$=strSep$> <$}$>              
                                      ] }<$=(iItem<PublishedItems.Length-1?",":"")$>                                                                
    <$}$>                          
            ]
    }
}

You can then return the following output for an encoding job with two input clips and several markers:

//JavaScript function
//Return JSON list of encoded files
function getEncodedFiles() {
    return {"items" : [

        { "mediaUrl": "NextGen_615k.wmv",
              "placeholderImage": "NextGen_Thumb.jpg",
              "chapters": [    
                    { "title": "Chapter 1",   "time": 0.595,
                        "imageUrl": "NextGen_MarkerThumb 00.00.00.5950000.jpg"} ,    
                    { "title": "Chapter 2",   "time": 2.748,
                        "imageUrl": "NextGen_MarkerThumb 00.00.02.7480000.jpg"} ,    
                    { "title": "Review comments here",   "time": 8.286,
                        "imageUrl": "NextGen_MarkerThumb 00.00.08.2860000.jpg"} ,    
                    { "title": "Chapter 3",   "time": 11.539,
                        "imageUrl": "NextGen_MarkerThumb 00.00.11.5390000.jpg"} ,    
                    { "title": "Chapter 4",   "time": 13.173,
                        "imageUrl": "NextGen_MarkerThumb 00.00.13.1730000.jpg"} ,    
                          ] },                                                                

        { "mediaUrl": "Powered_by_Silverlight_480p.wmv",
                  "placeholderImage": "Powered_by_Silverlight_480p_Thumb.png",
                  "chapters": [    
                                    { "title": "Goto point",   "time": 1.5745869,"imageUrl": ""}                
                              ] }                                                                
                      
            ]
    }
}

Silverlight 2

The following example shows how an HTML file generated for Silverlight 2 might be constructed to enumerate and return the encoded files from a job:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="MediaPlayerTemplate.xap"/>
        <param name="onerror" value="onSilverlightError" />
        <param name="initparams" value='fakemode=<$$>,background=<$=TemplateParameter.BackgroundColor$>,autoplay=<$=TemplateParameter.AutoPlay$>,muted=<$=TemplateParameter.Muted$>,scalemode=<$=TemplateParameter.ScaleMode$>,playlist=<$=PlayListParam()$>' />
        <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
        </a>
</object>

You can then return the following output for an encoding job with three input clips and several markers:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="MediaPlayerTemplate.xap"/>
        <param name="onerror" value="onSilverlightError" />
        <param name="initparams" value='fakemode=,background=#FF000000,autoplay=True,muted=False,scalemode=1,playlist=<playList><playListItems><playListItem title="" description="Courtesy%20of%20National%20Geographic.%20%20Used%20by%20Permission." mediaSource="Bear.wmv" thumbSource="Bear_Thumb.jpg" ><chapters><chapter  position="2.838" thumbnailSource="Bear_2.838.jpg" title="%5BUnknown%20Value%5D" /><chapter  position="4.650" thumbnailSource="Bear_4.650.jpg" title="%5BUnknown%20Value%5D" /><chapter  position="5.855" thumbnailSource="Bear_5.855.jpg" title="%5BUnknown%20Value%5D" /></chapters></playListItem><playListItem title="" description="Courtesy%20of%20Robert%20Millis.%20%20Used%20by%20Permission." mediaSource="Butterfly.wmv" thumbSource="Butterfly_Thumb.jpg" ><chapters><chapter  position="2.588" thumbnailSource="Butterfly_2.588.jpg" title="%5BUnknown%20Value%5D" /><chapter  position="4.503" thumbnailSource="Butterfly_4.503.jpg" title="%5BUnknown%20Value%5D" /><chapter  position="6.170" thumbnailSource="Butterfly_6.170.jpg" title="%5BUnknown%20Value%5D" /></chapters></playListItem><playListItem title="" description="Courtesy%20of%20National%20Geographic.%20%20Used%20by%20Permission." mediaSource="Lake.wmv" thumbSource="Lake_Thumb.jpg" ><chapters><chapter  position="3.181" thumbnailSource="Lake_3.181.jpg" title="%5BUnknown%20Value%5D" /><chapter  position="5.408" thumbnailSource="Lake_5.408.jpg" title="%5BUnknown%20Value%5D" /><chapter  position="7.572" thumbnailSource="Lake_7.572.jpg" title="%5BUnknown%20Value%5D" /></chapters></playListItem></playListItems></playList>' />
        <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
        </a>
</object>

Silverlight player

The preceding output could be used together with additional <xaml> and script to build a Silverlight video player that displays the chapter thumbnails at appropriate times.

In another example, you may want to enumerate the metadata for the first published item in the job and output it as a well-formed XML document for use inside a Silverlight player. The following template code:

<!—metadata.xml -->
<?xml version="1.0" encoding="utf-8"?>

<MetaData>

  <$ foreach (KeyValuePair=""
    <string,string>
      kvp in PublishedItems[0].MetaData) {$>
      <metadataitem>
        <title>
          <$=kvp.Key$></title>
        <value>
          <$=kvp.Value$></value>
      </metadataitem>

      <$}$>
    
</MetaData>

when it is applied to a job item which had the following metadata applied:

would create this output:

<?xml version="1.0" encoding="utf-8" ?>

<MetaData>

  <metadataitem>
        <title>Title</title>
        <value>title is foo</value>
    </metadataitem>
  
    <metadataitem>
        <title>Author</title>
        <value>author is bar</value>
    </metadataitem>

    <metadataitem>
        <title>Copyright</title>
        <value>(c) a friend</value>
    </metadataitem>
  
    <metadataitem>
        <title>Description</title>
        <value>A Metadata Example</value>
    </metadataitem>
    
</MetaData>

Assembly Import

$@ Import Namespace="name" $

Authoring Function

<script runat="authoring"> … </script> (can contain C# functions that code blocks can reference)

Code Block

<$ … $>

Option Directive

<$@ Options Property="value" $>

Property Name

Type

LaunchPage

System.Boolean

Name

System.String

TemplatePreviewImage

System.String

ThumbnailLocation

System.String

VideoLocation

System.String

Class:PublishedItem

Property Name

Type

Values

AspectRatioMode

Microsoft.Expression.MediaEncoder.AspectRatioMode

SquarePixels, FourThree, SixteenNine, Source, Custom

AudioProfile

System.String

CropRect

System.Drawing.Rectangle

CurrentOutputFileName

System.String

CustomAspectRatio

System.Drawing.Size

DisplayVideoSize

System.Drawing.Size

EndTime

System.TimeSpan

Error

System.Exception

FileDuration

System.TimeSpan

FileFrameRate

System.Double

FileType

Microsoft.Expression.MediaEncoder.FileType

Bitmask; 0x1=Audio, 0x2=Video, 0x4=Alpha

FirstWarning

System.String

IsDeleted

System.Boolean

IsLeadingImage

System.Boolean

IsTrailingImage

System.Boolean

LeadingClip

System.String

LeadingClipDuration

System.TimeSpan

LeadingImageDuration

System.TimeSpan

Markers

PublishedMarker[]

MarkerThumbnailCodec

System.String

MarkerThumbnailJpegCompression

System.Int32

MarkerThumbnailSize

System.Drawing.Size

MaxPacketSize

System.Nullable<System.Int32>

MetaData

Dictionary<string, string>

MinPacketSize

System.Nullable<System.Int32>

Name

System.String

OriginalAspectRatio

System.Drawing.Size

OriginalOverlaySize

System.Drawing.Size

OriginalVideoSize

System.Drawing.Size

OutputFileName

System.String

OverlayFile

System.String

OverlayLeadingClip

System.Boolean

OverlayOpacity

System.Double

OverlayRect

System.Drawing.Rectangle

OverlayTransparentBackground

System.Boolean

OverlayTrailingClip

System.Boolean

ScriptCommandOutput

Microsoft.Expression.MediaEncoder.ScriptCommandOutput

Header, Stream

ScriptCommands

PublishedScriptCommand[]

SourceFileName

System.String

Status

Microsoft.Expression.MediaEncoder.ItemStatus

Analyzing, Pending, WaitingToEncode, Encoding, FinishedEncode, Error

StartTime

System.TimeSpan

ThumbnailCodec

System.String

ThumbnailJpegCompression

System.Int32

ThumbnailMode

Microsoft.Expression.MediaEncoder.ThumbnailMode

None, BestFrame, FirstFrame, Custom

ThumbnailTime

System.TimeSpan

ThumbnailPath

System.String

TrailingClip

System.String

TrailingClipDuration

System.TimeSpan

TrailingImageDuration

System.TimeSpan

TwoPassEncoding

System.Boolean

VideoComplexity

System.Int32

VideoPixelSizeMode

Microsoft.Expression.MediaEncoder.VideoPixelSizeMode

Profile, Source, Custom

VideoProfile

System.String

VideoSize

System.Drawing.Size

VideoSizeMode

Microsoft.Expression.MediaEncoder.Media.VideoSizeMode

Stretch, Letterbox

VideoSizeModeLeadingClip

Microsoft.Expression.MediaEncoder.Media.VideoSizeMode

Stretch, Letterbox

VideoSizeModeTrailingClip

Microsoft.Expression.MediaEncoder.Media.VideoSizeMode

Stretch, Letterbox

Warnings

System.String

Class: PublishedScriptCommand

Property Name

Type

Command

System.String

Time

System.TimeSpan

Type

System.String

Class:PublishedMarker

Property Name

Type

GenerateKeyFrame

System.Boolean

GenerateThumbnail

System.Boolean

Time

System.TimeSpan

ThumbnailPath

System.String

Value

System.String

Community Additions

ADD
Show:
© 2014 Microsoft