Silverlight 技術文章

以 Silverlight 嵌入媒體播放

Laurence Moroney
Microsoft Corporation

更新日期：2007 年 5 月

適用於：

Microsoft Silverlight
Microsoft Visual Studio 2005

摘要：了解如何使用 Silverlight 建置服務，將視訊嵌入部落格 (或任何其他網頁)，只需要一個 iFrame，連結到服務位置 URL，便可以完成這項工作。(列印共 6 頁)

簡介

Silverlight 的優點之一是，它不是封閉式開發執行階段環境。因為您可以在 XAML 中實作 UI 並從 JavaScript 控制它，因此可以建置傳遞 Silverlight 前端的服務。在下列範例中，我將引導您執行建置服務的步驟，並將視訊嵌入部落格 (或任何其他網頁)，只需要一個 iFrame，連結到服務位置 URL，便可以完成這項工作。

注意本文將使用 Visual Web Developer Express。可從 Visual Web Developer 網站免費下載此軟體。

入門

首先，您將使用 Visual Web Developer 建立新網站。

建立新網站

開啟 Visual Web 設計工具。
在 [檔案] 功能表上按一下 [新網站]。
在開啟的 [新網站] 對話方塊中，選取 [ASP.NET 網站]。
在位置路徑尾端輸入 VideoService，指定網站名稱，如 [圖 1] 所示。

圖 1. 在 Visual Web Developer 中建立新網站 (按一下此處以放大影像)

您現在有新網站，其中包含一個名為 Default.aspx 的頁面。我們馬上會編輯該頁面，但先將兩個新目錄加入網站："js" 和 "xaml"。

將兩個名為 "js" 和 "xaml" 的目錄加入方案總管

在 [方案總管] 中以滑鼠右鍵按一下專案，然後按一下 [新增資料夾]。
將資料夾命名為 xaml。
重複步驟 1 和 2，以建立一個名為 js 的新資料夾。

完成時，方案總管如 [圖 2] 所示。

圖 2. 解決方案中已加入 "js" 和 "xaml" 目錄

接下來，您將建立媒體播放程式 XAML。

建立媒體播放程式 XAML

以滑鼠右鍵按一下剛建立的 XAML 目錄，然後選取 [加入新項目]。
在後續的對話方塊中，選取 [XML 檔]。
將檔案命名為 videoplayer.xaml，如 [圖 3] 所示。

圖 3. 建立 XAML 檔案 (按一下此處以放大影像)

將此檔案的內容取代為下列 XAML：

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="root"
        Loaded="javascript:handleLoad">
  <Canvas x:Name="VideoLayer">
    <MediaElement x:Name="VidElement" Canvas.Top="0"
        Canvas.Left="0" Height="100" Width="100">
    </MediaElement>
  </Canvas>
</Canvas>

這會建立可用來呈現視訊的媒體元素。XAML 是用來定義 Silverlight 使用者體驗的核心技術。如需 XAML 的詳細資訊，請瀏覽 MSDN Library 中的 Windows Presentation Foundation (WPF) 一節。

注意 WPF 物件模型中受支援的 XAML 標籤，在 Silverlight 中未必受到支援。

現在您需要 Silverlight 載入器指令碼。第一個是 Silverlight.js，它是 Silverlight SDK 的一部分：http://www.silverlight.net/。將此指令碼放入先前建立的 js 資料夾。

您也需要 createSilverlight.js 指令碼。它會處理此應用程式的 Silverlight 執行個體化。在 js 資料夾中建立新 JavaScript 檔案，將它命名為 createSilverlight.js。

以下列程式碼填入 createSilverlight.js：

function createSilverlight()
{  
Sys.Silverlight.createObject("xaml/videoplayer.xaml", 
   slControlHost, "slControl1",
    {width:'232', height:'240', 
     inplaceInstallPrompt:false, background:'white', 
     isWindowless:'true', framerate:'24', version:'0.8'},
    
    {onError:null, onLoad:null},
     null);
}

它會在呼叫 Silverlight 控制項時產生此控制項，並呈現儲存於先前所建之 videoplayer.xaml 中的 XAML。如需完整的屬性集，請參閱 http://www.silverlight.net/ 網站上的 Silverlight 文件。

在最後步驟中，開啟 Default.aspx 頁面，將其中的程式碼取代為下列程式碼：

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html >
<head>
    <title>Video Server Sample</title>

<script src="js/silverlight.js" type='text/javascript'></script>
<script src="js/createsilverlight.js" type='text/javascript'></script>
<script type="text/javascript">
function handleLoad() {   
   var slC = document.getElementById("slControl1");
   var elMedia = slC.content.findName("VidElement");
      elMedia.Width="<%
       if (Request.Params["width"] == null)
          Response.Write("425");
        else
           Response.Write(Request.Params["width"]);
    %>";
      elMedia.Height="<%
        if (Request.Params["height"] == null)
          Response.Write("350");
        else
          Response.Write(Request.Params["height"]);
    %>";
   elMedia.source = "<% Response.Write(Request.Params["src"]); %>";
   elMedia.play();
}
</script>
</head>

<body bgcolor="black">
    <div id='slControlHost'>
      <script type='text/javascript'>
            createSilverlight();
            
      </script>
    </div>
</body>
</html>

此程式碼會實作頁面 (Default.aspx)，您可以傳遞三個參數給它：

Src (包含您想要播放視訊的 URL)。
Width (包含視訊元素的所需寬度)。
Height (包含視訊元素的所需高度)。

如果回頭看先前的 XAML 檔案，您會看到 Loaded="javascript:handleLoad 屬性。它指定在載入和呈現 XAML 時，應該呼叫具名 JavaScript 函數 (在此例中為 handleLoad)。

handleLoad 的用途為何？首先，它會建立 JavaScript 可辨識的 Silverlight 元件參照。方法為透過標準 JavaScript 方法從 HTML DOM 中擷取元素參照。Silverlight 控制項已命名為 slControl1 (請參閱先前的 CreateSilverlight.js)，使用此名稱。其參照現在可透過 slC JavaScript 變數來控制。一旦有此元素，您可以在其內容上使用 findName 函數檢查其 XAML，並在 XAML 中取得元素參照。我們將取得先前在 XAML 中建立的 MediaElement (名為 VidElement) 之參照。

var slC = document.getElementById("slControl1");
var elMedia = slC.content.findName("VidElement");

接下來，我們將使用 C#，從要求行中擷取參數，並將這些參數分別指定給媒體元素的 Width、Height 和 Source 屬性。

elMedia.Width="<%
       if (Request.Params["width"] == null)
          Response.Write("425");
        else
           Response.Write(Request.Params["width"]);
    %>";
elMedia.Height="<%
        if (Request.Params["height"] == null)
          Response.Write("350");
        else
          Response.Write(Request.Params["height"]);
    %>";
elMedia.source = "<% Response.Write(Request.Params["src"]); %>";
elMedia.play();

現在您只需要執行應用程式並傳入一些參數。例如，您可以執行的工作如下列所示：

http://localhost:XXXX/VideoService/Default.aspx?src= http://download.microsoft.com/
download/d/e/2/de2bec9c-4ba1-406e-8029- 5c4767dca3eb/WPFE_Getting_Started_2MB_Ch9.wmv&height=200&width=200

其中 XXXX 是內建 Web 伺服器在執行階段指定的連接埠。

當您執行頁面時，就會有視訊播放程式！神奇的是，您可以將它部署至 Web 伺服器，然後在部落格使用此 URL 的 <IFrame> 來嵌入視訊！