В первом из своих блогов для ПК Про, веб-разработчик Ян Девлин показывает, как встроить видео на ваш сайт с помощью HTML5
Вероятно, самая большая и наиболее обсуждаемая функция HTML5 — это встроенное видео. В настоящее время единственным способом добавления видеоконтента на ваш веб-сайт является использование стороннего плагина, такого как Flash, QuickTime или RealPlayer. С появлением HTML5 и элемента видео все это изменится, и поддержка видео будет осуществляться веб-браузером, что избавит от необходимости какой-либо поддержки со стороны.
Несколько веб-браузеров уже предлагают поддержку HTML5. Здесь мы собираемся показать, как вы можете встроить видео без плагинов на свой сайт, и проблемы, с которыми вы столкнетесь.
Типы файлов и совместимость с браузерами
Для начала мы кратко рассмотрим различные типы видеофайлов, которые поддерживаются в HTML5. Это Theora OGG и H.264 (.mp4). Разные браузеры поддерживают разные типы, а некоторые вообще не поддерживают. Следующая таблица указывает на это:
| Теора ОГГ | H.264 (mp4) | |
|---|---|---|
| Фаерфокс 3.5+ | ✓ | Икс |
| Хром 3+ | ✓ | ✓ |
| Сафари 3+ | Икс | ✓ |
| Опера 10.5+ | ✓ | Икс |
| Интернет Эксплорер 8 | Икс | Икс |
| Интернет Эксплорер 9 | Икс | ✓ |
| айфон | Икс | ✓ |
| Андроид | Икс | ✓ |
Кодеки и другие технические проблемы
Сам HTML5 не определяет используемый видеокодек, и это привело к спорам о том, какой из них лучше. лучше всего использовать для Интернета. Таким образом, чтобы охватить все браузеры, мы должны поддерживать оба кодека.
И, конечно же, Internet Explorer. На данный момент ни одна из выпущенных версий Internet Explorer не поддерживает элемент видео, и для воспроизведения видео по-прежнему требуется подключаемый модуль. Это изменится с выпуском Internet Explorer 9 (вероятно, в начале следующего года), когда будет поддерживаться H.264, наряду со многими другими преимуществами HTML5.
Если вам интересно, как вы можете преобразовать свои видеофайлы в OGG (вы можете прочитать больше о типе Theora OGG на странице ТеораПоваренная книга) файлы с помощью Конвертер видео Миро.
Для получения более подробной информации об элементе видео и кодеках перейдите на страницу погрузиться в html5: видео в Интернете Марк Пилгрим.
HTML5-код
Теперь мы переходим к фактическому коду HTML5 и к тому, как заставить его работать. HTML5 предоставляет нам два новых элемента, которые мы можем использовать для добавления видео на наши веб-страницы: элемент, о котором мы уже упоминали, и элемент. Давайте рассмотрим каждый из них по очереди.
Элемент видео может иметь следующие атрибуты:
| Атрибут | Описание |
|---|---|
| источник | действительный URL-адрес самого видеофайла |
| Автовоспроизведение | логическое значение, указывающее, должно ли видео воспроизводиться автоматически |
| контролирует | логическое значение, указывающее, что браузер должен отображать элементы управления мультимедиа по умолчанию. |
| петля | логическое значение, указывающее, следует ли воспроизводить видео повторно |
| предварительная загрузка | указывает браузеру, требуется ли упреждающая загрузка самого видео или достаточно одних только метаданных. Возможные значения:
|
| плакат | URL-адрес файла изображения, который будет отображаться, когда видеоданные недоступны |
| ширина | ширина видео в пикселях CSS |
| высота | высота видео в пикселях CSS |
Из этого видно, как легко встроить видео OGG на свой веб-сайт, используя только элемент видео:
Вот и все.
Любой браузер, поддерживающий формат Theora OGG, теперь должен успешно отображать и воспроизводить ваше видео без лишних слов. Конечно, это не так просто, потому что, как мы видели из таблицы выше, код будет работать только в Firefox, Chrome и Opera. Так что нам тоже нужен запасной вариант H.264. Это может быть достигнуто с помощью элемент, который позволяет нам определить несколько источников мультимедиа для элемента видео.
элемент
Исходный элемент имеет следующие атрибуты:
| Атрибут | Описание |
|---|---|
| источник | действительный URL-адрес самого медиафайла (в данном случае видео) |
| тип | тип медиафайла, который должен быть MIME-тип, например type="video/ogg" указывает, что это видео Theora OGG, и вы также можете предоставить кодек MIME, чтобы помочь браузеру решить, как воспроизводить видео, используя type='video/ogg; codecs="theora, vorbis". |
| СМИ | дает предполагаемый медиа-тип медиа-ресурса и должен быть допустимым медиа-запрос, например media="handheld" указывает, что видео подходит для портативных устройств или media="all and (min-device-height: 720px)" что указывает на то, что видео подходит для экранов с разрешением 720 пикселей и более. |
Примечание: исходный элемент недействителен и имеет начальный тег, но не закрывающий тег.
Самая полезная вещь в элементе источника заключается в том, что мы можем использовать его для объединения различных типов файлов, позволяя браузеру пробовать каждый по очереди, пока не найдет тот, который он может воспроизвести.
С использованием
Чтобы сложить видео разных типов в элементе видео, мы вводим следующий код:
Приведенный выше код теперь будет работать во всех браузерах, кроме Internet Explorer, в котором будет отображаться указанное выше сообщение.
Вы можете проверить это самостоятельно, просмотрев страницу тестового видео HTML5, которая содержит образец видео бабочки в форматах Theora OGG и MP4. формат, поэтому, если вы просматриваете это в Firefox, Chrome, Safari, Opera или на iPhone или телефоне Android, вы должны иметь возможность просматривать это.
Острые ножи среди вас теперь заметят, что мы можем воспользоваться этим стекированием и вернуться к Flash (или какой-либо другой плагин) внизу вместо отображения сообщения «извините, вы не можете видеть это видео», используя следующее код:
Заключение
Как и в случае с большинством элементов HTML5, поддержка браузерами элементов источника и видео в настоящее время неоднородна. В настоящее время также ведутся большие споры о том, убьет ли исходный элемент использование Flash как самого популярного метода добавления видеоконтента на веб-сайты. Я не уверен, что это полностью убьет Flash, но, тем не менее, я думаю, будет справедливо сказать, что он останется здесь и предоставит веб-разработчикам более чистый и простой подход к встраиванию видео.
