共用方式為


在 Silverlight 專案中控制媒體播放

本頁僅適用 Silverlight 1 專案

當您將媒體檔案 (音訊或視訊) 新增至 Microsoft Silverlight 1.0 專案,再將其插入畫板時,該檔案就會新增至 [MediaElement] 物件,並設定為自動播放。這與將音訊或視訊檔插入 Windows Presentation Foundation 專案不同,因為後者會在腳本中建立時間軸。在 Microsoft Silverlight 1.0 專案中,您無法以控制動畫腳本的方式來控制視訊或音訊檔播放。

Cc374987.alert_note(zh-tw,Expression.10).gif注意事項:

您可以使用 Microsoft Expression Encoder 2 來建立媒體播放程式,並使用許多 Silverlight 1.0 範本的其中一個來更換其面板。媒體播放程式已包含播放、暫停及其他控制項的按鈕。您可以修改 Expression Encoder 2 隨附的 Silverlight 1.0 範本,或是在 Expression Blend 2 中開啟編碼專案,新增更多視覺元素及功能。

使用下列程序,控制 Expression Blend 2 中 Silverlight 1.0 專案的媒體檔案播放。如需有關在 Silverlight 1.0 專案中控制媒體的詳細資訊,請參閱 Silverlight 快速入門 (英文)。

在 Silverlight 1.0 專案中控制媒體檔案播放

  1. 將媒體檔案新增至您的專案。您可以使用新增媒體檔案至 Silverlight 1.0 專案中所述的程序。

  2. 重新命名媒體物件,然後從程式碼後置檔案參照媒體物件。例如,以滑鼠右鍵按一下 [物件與時間軸] 之下的媒體物件,選取 [重新命名],然後鍵入 MyVideo。

  3. 如果您要讓使用者擁有按一下即可停止和啟動媒體檔案的物件,請在此時將該物件新增至畫板,然後重新命名該物件。例如,將橢圓形新增至畫板,然後將它重新命名為 [暫停]。如需詳細資訊,請參閱將元素新增至 Silverlight 專案的 XAML 文件中重新命名物件

  4. 在 [專案] 面板的 [檔案] 下,按兩下 XAML 文件的程式碼後置檔案。例如,如果您正在編輯的 XAML 文件名為 [Page.xaml],請按兩下 [Page.xaml.js] 檔案。程式碼後置檔案會在 JavaScript 編輯器的 Expression Blend 2 中開啟。

  5. 您的程式碼後置檔案中,已有用以連接事件處理常式的程式碼範例行,如下所示:

    rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
    

    在程式碼的該行之下,新增下列文字:

    this.control.content.findName("Pause").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleClickPause));
    

    如此即會新增此程式碼,只要按一下名為 [暫停]的 物件,名為 handleClickPause 的事件處理常式方法就會回應 MouseLeftButtonDown 事件。

  6. 您的程式碼後置檔案已包含名為 handleMouseDown 的範例事件處理常式方法。請注意,handleLoad 方法結尾的最後一個大括號 (}) 後面有一個逗號 (,),但是 handleMouseDown 方法的最後一個大括號後面沒有逗號。這是因為 handleMouseDown 是最後一個宣告的方法。當您新增方法時,請確定除了最後一個方法之外,每個方法的最後一個大括號後面都要有一個逗號。

  7. 新增下列事件處理常式方法 (最好是在 handleMouseDown 事件之前):

    handleClickPause: function(sender, eventArgs) 
    {
        sender.findName("MyVideo").pause();
    },
    

    當使用者在 [暫停] 物件內按一下滑鼠左鍵時,此方法就會回應並暫停媒體播放。

  8. 按 F5 測試 Silverlight 1.0 應用程式。按一下 [暫停] 物件,看看媒體播放是否會暫停。您可以選擇為 [播放] 及 [停止] 按鈕重複這些步驟。

請參閱

概念

新增媒體檔案至 Silverlight 1.0 專案