在 ASP.NET 网页 (Razor) 网站中显示视频

项目
07/13/2023

本文介绍如何在 ASP.NET 网页 (Razor) 网站中使用视频 (媒体) 播放器，让用户查看存储在网站上的视频。使用 Razor 语法 ASP.NET 网页，可以播放 Flash (.) 、Media Player (.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 播放器

借助 Flash 帮助程序播放器 Video ，可以在网页中) 播放 Flash 视频 (.) 文件。至少必须提供视频文件的路径。如果只指定路径，则播放器将使用当前版本的 Flash 设置的默认值。典型的默认设置包括：

视频使用默认宽度和高度显示，不带背景色。
加载页面时，视频会自动播放。
视频会持续循环，直到它显式停止。
缩放视频以显示所有视频，而不是裁剪视频以适应特定大小。
视频在窗口中播放。

The MediaPlayer Player

借助 MediaPlayer 帮助程序播放器 Video ，可以播放 Windows Media 视频 (.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 文件中的布局说明、程序集中的托管代码和可选资源。可以在 Visual Studio 中创建 .xap 文件作为 Silverlight 应用程序项目。

视频 Silverlight 播放器使用你为播放器提供的设置和 .xap 文件中提供的设置。

提示

MIME 类型

浏览器下载文件时，浏览器确保文件类型与为要呈现的文档指定的 MIME 类型匹配。 MIME 类型是文件的内容类型或媒体类型。帮助 Video 程序使用以下 MIME 类型：

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

播放 Flash (.) 视频

此过程演示如何播放名为 sample.microsoft 的 Flash 视频。此过程假定您网站上有一个名为 Media 的文件夹，并且 .azure 文件位于该文件夹中。

如在 ASP.NET 网页网站中安装帮助程序中所述，将 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 、、autolow、autohigh、 mediumhigh和 best：low

<!-- 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) 视频

以下过程演示如何播放媒体文件夹中名为 sample.wmv 的窗口媒体视频。

如在 ASP.NET 网页网站中安装帮助程序中所述，将 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 允许指定哪些控件显示在用户界面中。可以将设置为 uiModeinvisible、 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 帮助程序库添加到网站，如在 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>