Учебный курс по WebMatrix, глава 11. Работа с видео

  • Article

Это продолжение учебного курса по WebMatrix. Предыдущие части руководство можно найти здесь:

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

Существует множество форматов видеофайлов, и для каждого формата обычно требуется свой проигрыватель и способ настройки проигрывателя. На веб-страницах 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, иначе Вы будете получать подобное сообщение об ошибке:

clip_image002[6]

Проигрыватель 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. Откройте страницу в браузере. Страница выводится на экран, и воспроизведение видеофайла запускается автоматически:

clip_image004[6]

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

clip_image006[6]

Параметр 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 бесплатно. Данный пакет позволяет установить множество параметров при конвертировании файла и выбрать один из многочисленных скинов.

clip_image008[6]

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

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