Глава 11. Работа с видео

Статья
10/20/2021

Глава 11. Работа с видео

Выбор проигрывателя видео

Существует множество форматов видеофайлов, и для каждого формата обычно требуется свой проигрыватель и способ настройки проигрывателя. На веб-страницах ASP.NET можно воспроизводить видеозаписи посредством вспомогательного объекта Video. Вспомогательный объект Video упрощает процесс внедрения видео в веб-страницу, поскольку он автоматически создает элементы HTML object и embed, которые обычно используются для добавления видео на страницу.

Вспомогательный объект Video поддерживает следующие проигрыватели видео:

Adobe Flash;
Windows MediaPlayer;
Microsoft Silverlight.

Для данного занятия, мы взяли файл Russia_clip и конвертировали его во все используемые форматы. Вы можете использовать как программное обеспечение для конвертирования видео файлов, так и онлайн конвертеры. Вы можете использовать Microsoft Expression Encoder 4, который можно получить бесплатно по программам DreamSpark, WebsiteSpark и BizSpark. Так же Вы можете скачать его ознакомительную версию. Однако он не поддерживает конвертирование в формат Flash видео.

Хелперы

Для изучения описанных в данном занятии возможностей, Вам необходимо установить описанным в предыдущих главах способом хелпер Video, входящий в ASP.NET Web Helpers Library 1.15, иначе Вы будете получать подобное сообщение об ошибке:

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

Вспомогательный объект Video.Flash воспроизводит видеофайлы в формате Flash (SWF-файлы) на веб-страницах. Для этого, как минимум, требуется задать путь к видеофайлу. Если не указать ничего, кроме значения path, проигрыватель использует заданные по умолчанию значения, которые определяются текущей версией Flash. Типичные параметры по умолчанию указаны ниже:

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

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

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

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

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

Проигрыватель Video.Silverlight воспроизводит видеофайлы в формате Windows Media Video (WMV-файлы), аудиофайлы Windows Media Audio (WMA-файлы) и MP3 (MP3-файлы). Параметр path следует настроить так, чтобы он указывал на пакет приложения на базе Silverlight (XAP-файл). Необходимо также настроить параметры width и height. Все остальные параметры не являются обязательными. Если при воспроизведении видео в проигрывателе Video.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)

Ниже описывается процедура воспроизведения видеофайла Russia_clip.swf в формате Flash. Процедура предполагает наличие на сайте папки Media, в которой находится SWF-файл.

1. Добавьте на веб-сайт страницу с именем FlashVideo.cshtml.

2. Добавьте на страницу следующую разметку:

<!DOCTYPE html>
<html>
<head>
    <title>Видео во Flash</title>
</head>
<body>
    @Video.Flash(path: "Media/russia_clip.swf",
                 width: "400",
                 height: "300",
                 play: true,
                 loop: true,
                 menu: false,
                 bgColor: "red",
                 quality: "medium",
                 scale: "exactfit",
                 windowMode: "transparent")
</body>
</html>

3. Откройте страницу в браузере. Страница выводится на экран, и воспроизведение видеофайла запускается автоматически:

Для параметра quality (качество) видео в формате Flash можно задать значения:

low (низкое),
autolow(низкое автоматическое),
autohigh (высокое автоматическое),
medium (среднее),
high (высокое),
best (наилучшее).

Видео в формате 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 веб-страница видна как фон сквозь видеоизображение, если какая-либо его часть прозрачна.

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

Перейдем к воспроизведению видео при помощи проигрывателя Windows Media. Для этого нам понадобится поместить файл с расширением WMV в папку Media. Мы будем использовать файл russia_clip.wmv, Вы же можете использовать любой файл, заменив его название в строках кода. Так же, не забудьте, веб хелпер должен быть установлен, если Вы начали новый проект.

1. Создайте страницу с именем MediaPlayerVideo.cshtml.

2. Добавьте на страницу следующую разметку:

<!DOCTYPE html>
<html>
<head>
  <title>Видео в формате MediaPlayer</title>
</head>
<body>
    @Video.MediaPlayer(
        path: "Media/russia_clip.wmv",
        width: "400",
        height: "300",
        autoStart: true,
        playCount: 3,
        uiMode: "full",
        stretchToFit: true,
        enableContextMenu: true,
        mute: false,
        volume: 90)
</body>
</html>

3. Откройте страницу в браузере. Видео загружается и воспроизводится автоматически.

Параметр path указывает путь к воспроизводимому файлу, а параметры Width и height ширину и высоту изображения в пикселах соответственно.

Параметр autostart отвечает за автоматическое воспроизведение видео при загрузке страницы и может принимать значения true или false.

Параметру playCount задается целочисленное значение, определяющее, сколько раз видеофайл должен воспроизводиться автоматически.

Параметр uiMode служит для указания, какие элементы управления должны отображаться в пользовательском интерфейсе. Параметру uimode можно задавать следующие значения:

invisible (невидимый),
none (нет),
mini (минимальный),
full (полный).

Если не указать значение для параметра uiMode, видео будет воспроизведено в окне с окном состояния, полосой поиска, кнопками управления, регуляторами громкости. Эти элементы управления будут отображаться и при воспроизведении аудиофайла в этом проигрывателе.

При воспроизведении видеофайла звук включен по умолчанию. Чтобы отключить звук, следует присвоить параметру mute значение true.

Управление уровнем громкости при воспроизведении видеофайла в MediaPlayer выполняется посредством задания параметру volume значения в диапазоне от 0 до 100. По умолчанию задано значение 50. В своем примере мы изменили значение до 90.

Параметр stretchToFit может принимать значения true или false и отвечает за заполнение воспроизводимым видео окна воспроизведения.

Параметр enableContextMenu так же может принимать значения true или false и позволяет нам отключить или разрешить использование контекстного меню при воспроизведении видео.

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

Ниже описывается процедура воспроизведения видеофайла, содержащегося в пакете XAP Silverlight , находящегося в папке Media.

1. Создайте страницу SilverlightVideo.cshtml.

2. Добавьте на нее следующую разметку:

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

Откройте страницу в браузере и Вы увидите полноценный плеер, с возможностью полноэкранного воспроизведения и множеством других функций, заданных при конвертировании в XAP файле. При конвертировании мы использовали Microsoft Expression Encoder 4, доступный во множестве специальных программ Microsoft бесплатно. Данный пакет позволяет установить множество параметров при конвертировании файла и выбрать один из многочисленных скинов.

@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if(photo != null){
        imagePath = @"images\Photo3.jpg";
        photo.AddTextWatermark("Что то написали", fontColor:"Yellow", fontFamily:
            "Arial");
        photo.Save(@"~\" + imagePath);    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Водяной знак</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<h1>Добавление водяного знака в изображение</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Изображение" />
  </div>
}
</body>
</html>

Этот код похож на код страницы Flip.cshtml в прежнем примере (хотя на этот раз используется файл Photo3.jpg). Чтобы добавить водяной знак, во вспомогательном объекте WebImage вызывают метод AddTextWatermark до сохранения изображения. При вызове метода AddTextWatermark передают текст "Мой водяной знак", задают цвет шрифта — желтый и семейство шрифтов — Arial (здесь это не показано, однако вспомогательный объект WebImage также позволяет задать прозрачность, семейство и размер шрифтов, положение текста водяного знака).

Как демонстрировалось ранее, изображение показывается на странице с помощью элемента <img> с атрибутом src, которому присвоено значение @imagePath.

2. Откройте страницу в браузере:

Использование изображения в качестве водяного знака

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

1. Добавьте новую страницу с именем ImageWatermark.cshtml.

2. Добавьте в папку images изображение, которое можно использовать как эмблему, и переименуйте его в MyCompanyLogo.jpg. Это изображение должно сохранять четкость, будучи уменьшенным до 80 пикселей в ширину и 20 — в высоту.

3. Замените существующую разметку следующим кодом:

@{  var imagePath = "";
   WebImage WatermarkPhoto = new WebImage(@"~\"+
        @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
    if(photo != null){
        imagePath = @"images\Photo4.jpg";
        photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
           horizontalAlign:"Center", verticalAlign:"Bottom",
           opacity:100,  padding:10);
      photo.Save(@"~\" + imagePath);      }
    }
<!DOCTYPE html>
<html>
<head>
  <title>Водяной знак — изображение</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
  <h1>Использование изображения в качестве водяного знака</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Изображение" />
    </div>
  }
</html>

Это еще одно видоизменение кода, встречавшегося в прежних примерах. В данном случае для добавления изображения в качестве водяного знака к целевому изображению (Photo4.jpg) до его сохранения вызывают метод AddImageWatermark. При вызове метода AddImageWatermark задаются размеры водяного знака: 80 пикселей в ширину и 20 пикселей в высоту. Изображение MyCompanyLogo.jpg по горизонтали расположено по центру, а по вертикали — у нижнего края целевого изображения. Для водяного знака задана прозрачность 100% и отбивка в 10 пикселей. Если водяной знак больше целевого изображения, операция не будет выполнена. Если водяной знак больше целевого изображения, а отбивка равна нулю, водяной знак игнорируется.

Как и прежде, для показа изображения применяется элемент <img> с динамическим атрибутом src.

4. Откройте страницу в браузере:

Благодарности

Благодарим Виталия Коробцева, руководителя инновационных проектов “ООО Валькирия”, за неоценимую помощь в подготовке этого руководства.

Дополнительные ресурсы