Учебный курс по WebMatrix, глава 11. Работа с видео
Это продолжение учебного курса по WebMatrix. Предыдущие части руководство можно найти здесь:
- Учебный курс по WebMatrix, глава 1. Начало работы с WebMatrix и веб-страницами ASP.NET
- Учебный курс по WebMatrix, глава 2. Использование кода веб-страниц ASP.NET
- Учебный курс по WebMatrix, глава 3. Более сложный пример на ASP.NET
- Учебный курс по WebMatrix, глава 4. Знакомство с синтаксисом Razor. Рекомендации по программированию
- Учебный курс по WebMatrix, глава 5. Знакомство с синтаксисом Razor, серверный код и ASP.NET
- Учебный курс по WebMatrix, глава 6. Знакомство с синтаксисом Razor. Обработка ошибок
- Учебный курс по WebMatrix, глава 7. Работа с формами
- Учебный курс по WebMatrix, глава 8. Работа с данными
- Учебный курс по WebMatrix, глава 9. Отображение данных
- Учебный курс по WebMatrix, глава 10. Работа с изображениями
Выбор проигрывателя видео
Существует множество форматов видеофайлов, и для каждого формата обычно требуется свой проигрыватель и способ настройки проигрывателя. На веб-страницах 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]](https://msdntnarchive.z22.web.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/45/38/metablogapi/6332.clip_image0026_31BB5FD5.gif "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]](https://msdntnarchive.z22.web.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/45/38/metablogapi/3771.clip_image0046_1DC1CD3F.gif "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]](https://msdntnarchive.z22.web.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/45/38/metablogapi/4857.clip_image0066_5BDAE7F0.gif "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]](https://msdntnarchive.z22.web.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/45/38/metablogapi/5811.clip_image0086_19F402A2.gif "clip_image008[6]")
Благодарности
Благодарим Виталия Коробцева, руководителя инновационных проектов “ООО Валькирия”, за неоценимую помощь в подготовке этого руководства.