從現有的 Silverlight 播放程式建立範本 (進階)

發行項
10/11/2017

Silverlight 視訊體驗不僅讓您享受高品質的已編碼視訊內容，在面板呈現上更提供豐富圖形和互動播放功能，Microsoft Expression Encoder 讓您透過範本就能創造出 Silverlight 視訊體驗。所謂範本，係集合了 HTML、JavaScript 和 XAML，這些檔案即定義了 Silverlight 視訊播放程式的使用者介面 (UI) 及互動功能。

Expression Encoder 提供了許多您可用來呈現視訊的範本，每個範本都有與眾不同、視覺效果令人驚艷的視訊播放程式 UI。但是，這並不表示您只能使用這些預設範本。Expression Encoder 具有強大擴充性，您可以使用 Microsoft Expression Blend 2 這類工具建立屬於自己的 Silverlight 視訊播放程式，再讓您的播放程式變成 Expression Encoder 可用的自訂範本。

如果您已經建立或打算建立自訂的 Silverlight 播放程式，且希望將該播放程式新增至 Expression Encoder 變成範本，就必須變更一些程式碼，讓 Expression Encoder 將該播放程式辨識為可用的範本檔案。本主題將告訴您如何將現有 Silverlight 視訊播放程式，成功轉換成範本。至於有關如何建置 Silverlight 播放程式的說明指示，則不在本主題的討論範圍內。

範本基本概念

Expression Encoder 會從系統中兩個不同位置取得範本：

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

使用者安裝的範本則在：

\Expression\Expression Encoder\Templates

在這些範本資料夾下的子資料夾中，通常會包含一些範本項目，也就是設計師自行建立的檔案 (請見前文)。因此建立新範本時，您應該將新範本放入子資料夾中。

每個檔案中其實包含了 HTML、XAML 或設計師已經建立的指令碼。此外，這些檔案也會包含 Expression Encoder 在對工作進行編碼時所要解譯和使用的指示詞和屬性 (所謂工作，係指您在 Expression Encoder 單一工作階段中為準備編碼所組合的視訊集合)。只要將必要的範本指示詞和工作屬性新增至您的自訂 Silverlight 播放程式後，就可以建立讓 Expression Encoder 用於您編碼專案的範本。

範本指示詞

凡是範本特定屬性 (例如範本名稱、Expression Encoder 所顯示的預覽點陣圖檔案名稱等) 都會在描述元區塊中宣告，這些屬性的前後會加上 <$@ 和 $>語彙基元。範例如下：

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

每個範本都必須至少宣告 Name。除了 LaunchPage 必須放在預設 HTML 頁面之外，其他指示詞都可以放在任何範本檔案中。

工作屬性

在透過類似 ASP.NET 的字串取代引擎對工作進行編碼時，已編碼視訊的檔案名稱、標記縮圖名稱、中繼資料等等工作特定屬性，都會經過評估。這個引擎不是限定只針對特定檔案類型，它執行的目標是範本中的所有檔案，而且您也可以根據編碼工作的屬性，利用此引擎產生自訂的 HTML、XML、JavaScript、XAML 或其他任何文字檔案類型。

範本檔案中的文字一律視為常值字串，並放在檔案中所插入的 C# 程式碼區塊裡，前後加上 <$ 和 $> 語彙基元對組。在程式碼區塊內，您可以放入程式設計邏輯；若要讓字串可以傳回至範本並變成內嵌，則可以使用 = 運算子。與 ASP.NET 一樣的是，流程控制項邏輯可以分割成多個程式碼區塊。例如，某個範本包含一個具有以下程式碼的 HTML 檔案：

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

這個範本就會產生類似以下的工作輸出檔，其中包含三個項目：

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

當 Expression Encoder 處理這項工作時，會先對視訊檔案進行編碼，然後評估每個範本檔案，藉以建立工作輸出。

誠如以上所示，可讓您存取並評估編碼工作屬性的簡單物件模型，會公開給指令碼區塊中的執行程式碼。本節後文會提供所有物件和方法的完整清單。

Silverlight 1

下列範例說明如何將 Silverlight 1 產生的 JavaScript 檔案建構成有列舉功能，並將工作所產生的已編碼檔案傳回成一份 JSON 清單：

//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?",":"")$>                                                                
    <$}$>                          
            ]
    }
}

於是，您就可以傳回下列具有兩個輸入剪輯和多個標記的編碼工作輸出：

//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

下列範例說明如何將 Silverlight 2 產生的 HTML 檔案建構成有列舉功能，並傳回工作所產生的已編碼檔案：

<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="https://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
        </a>
</object>

於是，您就可以傳回下列具有三個輸入剪輯和多個標記的編碼工作輸出：

<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="https://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
        </a>
</object>

Silverlight 播放程式

上面這個輸出可以與額外的 <xaml> 搭配，組成建置 Silverlight 視訊播放程式的指令碼，讓播放程式在適當時間顯示章節縮圖。

再舉另外一個範例，您可能希望能列舉工作中第一個發佈項目的中繼資料，並將該中繼資料輸出為格式正確的 XML 文件，以用於 Silverlight 播放程式內。下列範本程式碼：

<!—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>

如果套用上述程式碼的工作項目已套用了下列中繼資料：

就會產生以下輸出：

<?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>

指示詞一覽表

組件匯入	$@ Import Namespace="name" $
撰寫函式	<script runat="authoring"> … </script> (可包含 C# 函式，讓程式碼區塊參考)
程式碼區塊	<$ … $>
選項指示詞	<$@ Options Property="value" $>

範本選項屬性一覽表

屬性名稱	類型
LaunchPage	System.Boolean
Name	System.String
TemplatePreviewImage	System.String
ThumbnailLocation	System.String
VideoLocation	System.String

工作屬性一覽表

Class:PublishedItem

屬性名稱	類型	值
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>
名稱	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

屬性名稱	類型
Command	System.String
Time	System.TimeSpan
類型	System.String

Class:PublishedMarker

屬性名稱	類型
GenerateKeyFrame	System.Boolean
GenerateThumbnail	System.Boolean
時間	System.TimeSpan
ThumbnailPath	System.String
Value	System.String

共用方式為