在 ASP.NET 網頁 (Razor) 網站中顯示影片

發行項
09/26/2024

本文介紹如何在 ASP.NET 網頁 (Razor) 網站中使用影片 (媒體) 播放器來讓使用者查看儲存在網站上的影片。使用 Razor 語法的 ASP.NET 網頁可讓您播放 Flash (.swf)、媒體播放器 (.wmv) 和 Silverlight (.xap) 影片。

您將學到什麼：

如何選擇影片播放器。

如何將影片加入網頁。

如何設定影片播放器屬性。

這些就是本文介紹的 ASP.NET Razor 頁面功能：

Video 協助程式。

教學中使用的軟體版本

ASP.NET 網頁 (Razor) 2

WebMatrix 2

本教學也適用於 WebMatrix 3。

簡介

您可能想在您的網站上顯示影片。一種方法是連結到已有該影片的網站，例如 YouTube。如果您想將這些網站的影片直接嵌入到您自己的頁面中，通常可以從該網站取得 HTML 標記，然後將其複製到您的頁面中。例如，以下範例展示如何嵌入 YouTube 影片：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Embedded Video Example</title>
    </head>
    <body>
        <h1>Embedded Video Example</h1>
        <p>The following video provides an introduction to WebMatrix:</p>
        <iframe width="560" 
                height="315" 
                src="http://www.youtube.com/embed/fxCEcPxUbYA" 
                frameborder="0" 
                allowfullscreen></iframe>
</body>
</html>

如果您想播放您自己網站上的影片 (而不是公共影片分享網站上的影片)，則無法使用這樣的嵌入式標記直接連結到該影片。但是，您可以使用協助程式播放網站中的影片，該 Video 協助程式會直接在頁面中呈現媒體播放器。

選擇影片播放器

影片檔案有多種格式，每種格式通常需要不同的播放器和不同的播放器設定方式。在 ASP.NET Razor 頁面中，您可以使用 Video 協助程式在網頁中播放影片。此 Video 協助程式簡化了在網頁中嵌入影片的過程，因為它會自動產生通常用於將影片新增至頁面的 object 和 embed HTML 元素。

Video 協助程式支援以下媒體播放器：

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Flash 播放器

Video 協助程式的 Flash 播放器可讓您在網頁中播放 Flash 影片 (.swf 檔案)。至少，您必須提供影片檔案的路徑。如果僅指定路徑，則播放器將使用目前版本的 Flash 設定的預設值。典型的預設設定是：

影片使用預設寬度和高度顯示，沒有背景顏色。
頁面載入時影片會自動播放。
影片不斷循環，直到明確停止。
影片會縮放以顯示所有影片，而不是裁剪影片以適合特定尺寸。
影片在視窗中播放。

MediaPlayer 播放器

此 Video 協助程式的 MediaPlayer 播放器可讓您在網頁中播放 Windows Media 影片 (.wmv 檔案)、Windows Media 音訊 (.wma 檔案) 和 MP3 (.mp3 檔案)。您必須包含要播放的媒體檔案的路徑；所有其他參數都是可選的。如果僅指定路徑，播放器將使用目前版本的 MediaPlayer 設定的預設設置，例如：

影片使用其預設寬度和高度顯示。
頁面載入時影片會自動播放。
影片播放一次 (不循環播放)。
播放器在使用者介面中顯示全套控制。
影片在視窗中播放。

Silverlight 播放器

Video 協助程式的 Silverlight 播放器可讓您播放 Windows Media 影片 (.wmv 檔案)、Windows Media 音訊 (.wma 檔案) 和 MP3 (.mp3 檔案)。您必須將路徑參數設定為指向基於 Silverlight 的應用程式封裝 (.xap 檔案)。您還必須設定寬度和高度參數。所有其他參數皆為選擇性使用。當您使用 Silverlight 播放器播放影片時，如果僅設定所需的參數，Silverlight 播放器將顯示沒有背景顏色的影片。

注意

如果您還不了解 Silverlight：.xap 檔案是一個壓縮文件，其中包含 .xaml 檔案中的佈局指令、程式集中的託管程式碼以及可選資源。您可以在 Visual Studio 中建立 .xap 檔案作為 Silverlight 應用程式專案。

Silverlight 影片播放器使用您為播放器提供的設定以及 .xap 檔案中提供的設定。

提示

MIME 類型

當瀏覽器下載文件時，瀏覽器會確保文件類型與正在呈現的文件指定的 MIME 類型相符。 MIME 類型是檔案的內容類型或媒體類型。此 Video 協助程式使用以下 MIME 類型：

application/x-shockwave-flash
application/x-mplayer2
application/x-silverlight-2

播放 Flash (.swf) 影片

此過程向您展示如何播放名為 sample.swf 的 Flash 影片。這個過程假定您的網站上有一個名為 Media 的資料夾，並且 .swf 檔案位於該資料夾中。

如果尚未新增 ASP.NET Web Helpers 程式庫，請依照在 ASP.NET 網頁網站中安裝說明程式中所述將其新增至您的網站。
在網站中，新增一個頁面並將其命名為 FlashVideo.cshtml。

將以下標記新增至頁面：

<!DOCTYPE html>
<html>
<head>
    <title>Flash Video</title>
</head>
<body>
    @Video.Flash(path: "Media/sample.swf",
                 width: "400",
                 height: "600",
                 play: true,
                 loop: true,
                 menu:  false,
                 bgColor: "red",
                 quality: "medium",
                 scale: "exactfit",
                 windowMode: "transparent")
</body>
</html>

在瀏覽器中執行該頁面。 (在執行該頁面之前，請確保在檔案工作區中選擇該頁面。) 該頁面將顯示，影片將自動播放。

您可以將 Flash 影片的 quality 參數設定為 low、autolow、autohigh、medium、high 和 best：

<!-- Set the Flash video quality -->
@Video.Flash(path: "Media/sample.swf", quality: "autohigh")

您可以使用 scale 參數變更 Flash 影片以特定大小播放，您可以將其設定為以下內容：

showall. 這使得整個影片可見，同時保持原始的寬高比。但是，您最終可能會在每一側都有邊框。
noorder. 這會在保持原始寬高比的同時縮放影片，但可能會被裁剪。
exactfit. 這使得整個影片可見，而不保留原始寬高比，但可能會發生失真。

如果不指定 scale 參數，則整個影片將可見，並且將保持原始寬高比而不進行任何裁剪。以下範例展示如何使用該 scale 參數：

<!-- Set the Flash video to an exact size -->
@Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",
    scale: "exactfit")

Flash 播放器支援名為 windowMode 的影片模式設定。您可以將其設為 window、opaque 和 transparent。預設情況下，windowMode 設定為 window，這會在網頁上的單獨視窗中顯示影片。該 opaque 設定隱藏了網頁上影片後面的所有內容。 transparent 設定允許網頁背景透過影片顯示，假設影片的任何部分都是透明的。

播放 MediaPlayer (.wmv) 影片

以下流程向您展示如何播放 Media 資料夾中名為 sample.wmv 的 Window Media 影片。

如果尚未將 ASP.NET Web Helpers 程式庫新增至您的網站，請依照在 ASP.NET 網頁網站中安裝說明程式中的說明進行操作。
建立一個名為 MediaPlayerVideo.cshtml 的新頁面。

將以下標記新增至頁面：

<!DOCTYPE html>
<html>
<head>
  <title>MediaPlayer Video</title>
</head>
<body>
    @Video.MediaPlayer(
        path: "Media/sample.wmv",
        width: "400",
        height: "600",
        autoStart: true,
        playCount: 2,
        uiMode:  "full",
        stretchToFit: true,
        enableContextMenu: true,
        mute: false,
        volume: 75)
</body>
</html>

在瀏覽器中執行該頁面。影片自動載入並播放。

您可以設定 playCount 為一個整數，表示自動播放影片的次數：

<!-- Set the MediaPlayer video playCount -->
@Video.MediaPlayer(path: "Media/sample.wmv", playCount: 2)

uiMode 參數可讓您指定哪些控制項顯示在使用者介面中。您可以設定 uiMode 為 invisible、none、mini 或 full。如果不指定 uiMode 參數，除了影片視窗之外，影片還會顯示狀態視窗、搜尋列、控制按鈕和音量控制。如果您使用播放器播放音訊文件，這些控制項也會顯示。以下是如何使用 uiMode 參數的範例：

<!-- Set the MediaPlayer control UI -->
@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

預設情況下，播放影片時音訊會開啟。您可以將 mute 參數設為 true 將音訊靜音：

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)

您可以透過將 volume 參數設定為 0 到 100 之間的值來控制 MediaPlayer 影片的音訊等級。預設值是 50。以下是範例：

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

播放 Silverlight 影片

此過程向您展示如何播放 Silverlight .xap 頁面 (位於名為 Media 的資料夾中) 中包含的影片。

如果尚未將 ASP.NET Web Helpers 程式庫新增至您的網站，請依照在 ASP.NET 網頁網站中安裝說明程式中的說明進行操作。
建立一個名為 SilverlightVideo.cshtml 的新頁面。

將以下標記新增至頁面：

<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
    @Video.Silverlight(
        path: "Media/sample.xap",
        width: "400",
        height: "600",
        bgColor: "red",
        autoUpgrade: true)
</body>
</html>