В первом из его блогов для ПК Pro , веб-разработчик Ян Девлин показывает, как встроить видео на ваш сайт с помощью HTML5
как выбрать несколько писем в Gmail
Вероятно, самая большая и самая обсуждаемая функция HTML5 - это встроенное видео. В настоящее время единственный метод добавления видеоконтента на ваш сайт - это сторонний плагин, такой как Flash, QuickTime или RealPlayer. С появлением HTML5 и элемента видео все это изменится: поддержка видео будет осуществляться веб-браузером, что устранит необходимость в какой-либо поддержке третьих лиц.
Некоторые веб-браузеры уже предлагают поддержку HTML5. Здесь мы расскажем, как можно встроить видео без плагинов на свой сайт, а также о проблемах, с которыми вы можете столкнуться.
Типы файлов и совместимость с браузером
Для начала мы кратко рассмотрим различные типы видеофайлов, которые поддерживаются в HTML5. Это Theora OGG и H.264 (.mp4). Разные браузеры поддерживают разные типы, а некоторые вообще не поддерживают. Следующая таблица показывает это:
| Теора OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | Икс |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | Икс | ✓ |
| Opera 10.5+ | ✓ | Икс |
| Internet Explorer 8 | Икс | Икс |
| Internet Explorer 9 | Икс | ✓ |
| iPhone | Икс | ✓ |
| Android | Икс | ✓ |
Кодеки и другие технические проблемы
В самом HTML5 не указан видеокодек для использования, и это привело к спорам относительно того, какой именно лучшее для использования в Интернете . Итак, чтобы охватить все браузеры, мы должны поддерживать оба кодека.
И, конечно же, Internet Explorer. На данный момент ни одна из выпущенных версий Internet Explorer не поддерживает элемент видео, и для воспроизведения видео по-прежнему требуется плагин. Это изменится с выпуском Internet Explorer 9 (вероятно, в начале следующего года), когда будет поддерживаться H.264, а также многие другие полезности HTML5.
Если вам интересно, как вы можете конвертировать ваши видеофайлы в OGG (вы можете узнать больше о типе Theora OGG на Теора ) файлы с помощью Конвертер видео Miro .
Для получения более подробной информации о видеоэлементе и кодеках перейдите к погрузиться в html5: видео в Интернете пользователя Mark Pilgrim.
HTML5 код
Теперь мы переходим к собственно коду HTML5 и к тому, как заставить его работать. HTML5 предоставляет нам два новых элемента, которые мы можем использовать для добавления видео на наши веб-страницы: элемент, о котором мы уже упоминали, и элемент. Давайте рассмотрим каждый из них по очереди.
Элемент
Элемент видео может иметь следующие атрибуты:
| Атрибут | Описание |
|---|---|
| src | действительный URL-адрес самого видеофайла |
| Автовоспроизведение | логическое значение, указывающее, должно ли видео воспроизводиться автоматически |
| контроль | логическое значение, указывающее, что в браузере должны отображаться элементы управления мультимедиа по умолчанию |
| петля | логическое значение, указывающее, следует ли воспроизводить видео повторно |
| предварительная нагрузка | указывает браузеру, требуется ли предварительная загрузка самого видео или нужны только метаданные. Возможные значения:
|
| плакат | URL-адрес файла изображения, который будет отображаться при отсутствии видеоданных |
| ширина | ширина видео в пикселях CSS |
| высота | высота видео в пикселях CSS |
Из этого видно, насколько легко встроить видео OGG на свой веб-сайт, используя только элемент видео:
Вот и все.
Любой браузер, поддерживающий формат Theora OGG, теперь должен успешно отображать и воспроизводить ваше видео без лишних слов. Конечно, это не так просто, потому что, как мы видели из таблицы выше, код будет работать только в Firefox, Chrome и Opera. Так что нам также нужен откат к H.264. Этого можно добиться с помощью element, который позволяет нам определять несколько источников мультимедиа для элемента видео.
как изменить имя в pubg pc
Элемент
Исходный элемент имеет следующие атрибуты:
| Атрибут | Описание |
|---|---|
| src | действительный URL-адрес самого медиафайла (в данном случае видео) |
| тип | тип медиафайла, который должен быть Тип MIME , например type='video/ogg' указывает, что это видео Theora OGG, и вы также можете предоставить кодек MIME, чтобы помочь браузеру решить, как воспроизводить видео, используя type='video/ogg; codecs='theora, vorbis'. |
| половина | указывает предполагаемый тип мультимедиа медиаресурса и должен быть допустимым медиа-запрос , например media='handheld' указывает, что видео подходит для портативных устройств или media='all and (min-device-height:720px)' что означает, что видео подходит для экранов с разрешением 720 пикселей и более. |
Примечание: исходный элемент недействителен и имеет начальный тег, но не закрывающий.
Самая полезная вещь в исходном элементе заключается в том, что мы можем использовать его для объединения различных типов файлов, позволяя браузеру пробовать каждый по очереди, пока не найдет тот, который можно воспроизвести.
Используя и вместе
Чтобы складывать видео разных типов в элемент видео, мы вводим следующий код:
Your browser does not support the video element.
Приведенный выше код теперь будет работать во всех браузерах, кроме Internet Explorer, в котором будет отображаться сообщение, указанное выше.
Вы можете проверить это самостоятельно, просмотрев страницу тестового видео HTML5, которая содержит образец видео бабочки в формате Theora OGG и MP4, поэтому, если вы просматриваете его в Firefox, Chrome, Safari, Opera или на iPhone или Телефон Android, вы должны увидеть его.
Среди острых ножей вы теперь заметите, что мы можем воспользоваться преимуществами этого стекирования и иметь резервную копию Flash (или какого-либо другого плагина) внизу вместо вывода извинения, что вы не видите это видео-сообщение, используя следующий код :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Заключение
Как и в случае с большинством элементов HTML5, поддержка браузером элементов источника и видео в настоящее время неоднородна. В настоящее время также ведутся большие споры о том, убьет ли исходный элемент использование Flash как самого популярного метода добавления видеоконтента на веб-сайты. Я не уверен, что это полностью убьет Flash, но, тем не менее, я думаю, будет справедливо сказать, что он останется и предоставит веб-разработчикам более чистый и простой подход к встраиванию видео.
