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

發行項
07/13/2023

本文說明如何在 ASP.NET Web Pages (Razor) 網站中使用影片 (媒體) 播放程式，讓使用者檢視儲存在網站上的影片。使用 Razor 語法 ASP.NET Web Pages可讓您播放 Flash (.) 、Media Player (.wmv) ，以及 Silverlight (.xap) 影片。

您將學到什麼：

如何選擇視訊播放程式。

如何將影片新增至網頁。

如何設定視訊播放程式屬性。

以下是文章仲介紹的 ASP.NET Razor 頁面功能：

協助 Video 程式。

教學課程中使用的軟體版本

ASP.NET Web Pages (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 播放機

Flash協助程式的播放 Video 程式可讓您 (網頁) 播放 Flash 影片。您至少必須提供影片檔案的路徑。如果您未指定路徑，播放機會使用目前 Flash 版本所設定的預設值。一般預設設定為：

視訊會使用其預設寬度和高度來顯示，而且沒有背景色彩。
當頁面載入時，影片會自動播放。
影片會持續迴圈，直到明確停止為止。
視訊會調整為顯示所有影片，而不是裁剪視訊以符合特定大小。
影片會在視窗中播放。

The MediaPlayer Player

MediaPlayer協助程式的播放 Video 程式可讓您 (.wmv檔案) 、Windows Media 音訊 (.wma檔案) ，以及 MP3 (.mp3網頁中的檔案) 播放。您必須包含要播放之媒體檔案的路徑;所有其他參數都是選擇性的。如果您只指定路徑，播放機會使用目前 MediaPlayer 版本所設定的預設設定，例如：

影片會使用其預設寬度和高度來顯示。
當頁面載入時，影片會自動播放。
影片播放一次 (不會迴圈) 。
播放機會在使用者介面中顯示完整的控制項集。
影片會在視窗中播放。

Silverlight 播放機

Silverlight協助程式的播放 Video 程式可讓您播放 Windows Media Video (.wmv檔案) 、Windows Media Audio (.wma檔案) ，以及 MP3 (.mp3檔案) 。您必須將 path 參數設定為指向 Silverlight 型應用程式套件， (.xap 檔案) 。您也必須設定寬度和高度參數。所有其他參數都是選擇性的。當您將 Silverlight 播放程式用於視訊時，如果您只設定必要的參數，Silverlight 播放機會顯示沒有背景色彩的視訊。

注意

如果您還不知道 Silverlight： .xap 檔案是壓縮的檔案，其中包含 .xaml 檔案中的版面配置指令、元件中的 Managed 程式碼，以及選擇性資源。您可以在 Visual Studio 中建立 .xap 檔案作為 Silverlight 應用程式專案。

視 Silverlight 訊播放程式會使用您提供給播放機的設定，以及 .xap 檔案中提供的設定。

提示

MIME 類型

當瀏覽器下載檔案時，瀏覽器會確定檔案類型符合針對正在轉譯的檔所指定的 MIME 類型。 MIME 類型是檔案的內容類型或媒體類型。協助 Video 程式會使用下列 MIME 類型：

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

播放 Flash (.) 影片

此程式會示範如何播放名為 sample.api 的Flash 影片。此程式假設您在網站上有一個名為 Media 的資料夾，且 .vm 檔案位於該資料夾中。

如尚未新增 ASP.NET Web Pages網站中的協助程式中所述，將 ASP.NET Web 協助程式程式庫新增至您的網站。
在網站中，新增頁面並將其命名為 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")

您可以使用參數，將 Flash 視訊變更為以特定大小 scale 播放，您可以將其設定為下列專案：

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

下列程式示範如何播放Media 資料夾中名為sample.wmv的 Window Media 影片。

如尚未在ASP.NET Web Pages網站中安裝協助程式中所述，將 ASP.NET Web 協助程式程式庫新增至您的網站。
建立名為 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 影片

此程式示範如何在名為Media的資料夾的 Silverlight .xap頁面中播放包含的視訊。

如果您還沒有，請將 ASP.NET Web Helpers 程式庫新增至您的網站，如在ASP.NET Web Pages 網站中安裝協助程式中所述。
建立名為 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>