Отображение видео на сайте веб-страницы ASP.NET (Razor)

Статья
07/13/2023

; автор — Том ФитцМакен (Tom FitzMacken)

В этой статье объясняется, как использовать видеопроигрыватель (мультимедиа) на веб-сайте веб-страницы ASP.NET (Razor), чтобы позволить пользователям просматривать видео, хранящиеся на сайте. веб-страницы ASP.NET с синтаксисом Razor позволяет воспроизводить видео 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-видео (SWF-файлы ) на веб-странице. Как минимум, необходимо указать путь к видеофайлу. Если вы не указываете ничего, кроме пути, проигрыватель использует значения по умолчанию, заданные текущей версией Flash. Типичные параметры по умолчанию:

Видео отображается с использованием ширины и высоты по умолчанию и без цвета фона.
Видео воспроизводится автоматически при загрузке страницы.
Видео постоянно циклически, пока не будет явно остановлено.
Видео масштабируется для отображения всего видео, а не обрезки видео в соответствии с определенным размером.
Видео воспроизводится в окне.

Проигрыватель MediaPlayer

Проигрыватель MediaPlayer вспомогательного Video средства позволяет воспроизводить видео Windows Media (WMV-файлы ), звук Windows Media (WMA-файлы ) и MP3 (.mp3 файлы) на веб-странице. Необходимо указать путь к файлу мультимедиа для воспроизведения; все остальные параметры являются необязательными. Если указан только путь, проигрыватель использует параметры по умолчанию, заданные текущей версией MediaPlayer, например:

Видео отображается с использованием ширины и высоты по умолчанию.
Видео воспроизводится автоматически при загрузке страницы.
Видео воспроизводится один раз (оно не циклически).
Проигрыватель отображает полный набор элементов управления в пользовательском интерфейсе.
Видео воспроизводится в окне.

Проигрыватель Silverlight

Проигрыватель Silverlight вспомогательного Video средства позволяет воспроизводить видео Windows Media (WMV-файлы ), windows Media Audio (WMA-файлы ) и MP3 (.mp3 файлы). Необходимо задать параметр path, указывающий на пакет приложений на основе Silverlight (XAP-файл ). Также необходимо задать параметры ширины и высоты. Все остальные параметры являются необязательными. При использовании проигрывателя Silverlight для видео, если заданы только необходимые параметры, проигрыватель Silverlight отображает видео без цвета фона.

Примечание

Если вы еще не знаете Silverlight: XAP-файл — это сжатый файл, содержащий инструкции макета в XAML-файле , управляемый код в сборках и дополнительные ресурсы. XAP-файл можно создать в Visual Studio как проект приложения Silverlight.

Видеопроигрыватель Silverlight использует как параметры, предоставленные для проигрывателя, так и параметры, указанные в XAP-файле .

Совет

Типы MIME

Когда браузер загружает файл, браузер проверяет, соответствует ли он типу MIME, указанному для отрисовываемого документа. Тип MIME — это тип контента или тип мультимедиа файла. Вспомогателя Video используются следующие типы MIME:

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

Воспроизведение видео flash (SWF)

В этой процедуре показано, как воспроизвести видео flash с именем sample.swf. В процедуре предполагается, что на сайте есть папка с именем Media и что в ней находится SWF-файл .

Добавьте библиотеку веб-помощников ASP.NET на веб-сайт, как описано в разделе Установка вспомогательных служб на сайте веб-страницы 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")

Вы можете изменить 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 player поддерживает параметр режима видео с именем windowMode. Для этого параметра можно задать значения window, opaqueи transparent. По умолчанию windowMode для имеет значение window, которое отображает видео в отдельном окне на веб-странице. Параметр opaque скрывает все содержимое видео на веб-странице. Этот transparent параметр позволяет отображать фон веб-страницы через видео, при условии, что любая часть видео является прозрачной.

Воспроизведение видео MediaPlayer (WMV)

В следующей процедуре показано, как воспроизвести видео Window Media с именем sample.wmv , которое находится в папке Media .

Добавьте библиотеку веб-помощников ASP.NET на веб-сайт, как описано в разделе Установка вспомогательных служб на сайте веб-страницы 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 позволяет указать, какие элементы управления отображаются в пользовательском интерфейсе. Можно задать значение 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)

Вы можете управлять уровнем звука видео MediaPlayer, задав volume для параметра значение от 0 до 100. Значение по умолчанию — 50. Ниже приведен пример:

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

Воспроизведение видео о Silverlight

В этой процедуре показано, как воспроизводить видео, содержащееся на XAP-странице Silverlight, которая находится в папке Media.

Добавьте библиотеку веб-помощников ASP.NET на веб-сайт, как описано в разделе Установка вспомогательных служб на сайте веб-страницы 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>