HTML5 продолжает ошеломлять интернет-сообщество революционными веб-функциями. Одним из ключевых улучшений HTML5 является расширенная поддержка видео. С новым стандартом HTML5 пользователям не нужны специальные плагины для потоковой передачи видео в веб-браузерах как на ПК, так и на любом портативном устройстве. Несмотря на растущую популярность стандарта HTML5, большинство веб-разработчиков и дизайнеров неохотно переходят на новый язык разметки, возможно, из-за отсутствия полной спецификации HTML5 или отсутствия практической информации о кодировании HTML5. В этой статье я хотел бы более подробно взглянуть на элемент видео HTML5 и объяснить его основные моменты на простом английском языке.
тег <video> против тега <object>
Тег <object> Разметка для этого тега довольно загадочная. Таким образом, если вы хотите встроить Flash-видео в веб-страницу, вам необходимо вставить следующий код:
<object id = 0 type = "application / x-shockwave-flash" data = player_flv_maxi.swf width = 420 height = 240 <param name = "movie" value = player_flv_maxi.swf /> <param name = "wmode" value = "opaque" /> <param name = "allowFullScreen" value = "true" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "quality" value = "high" /> <param name = "menu" value = "true" /> <param name = "autoplay" value = "false" /> <param name = "autoload" value = "false" /> <param name = "FlashVars" value = "flv = Wildlife.flv & width = 420 & height = 240 & autoplay = 0 & autoload = 0 & buffer = 5 & buffermessage = & playercolor = 464646 & loadingcolor = 999898 & buttoncolor = ffffff & buttonovercolor = dddcdc & slidercolor = f = & field_dw = видимость_d = = field_d = = play_f = вид файла 0 & buffershowbg = 0 "/>
Чтобы поиграть в это, пользователи не могут обойтись без плагина Flash Player, который необходим для всех современных браузеров, кроме Google Chrome, поскольку плеер уже предустановлен в браузере.
HTML5 вводит новый тег <video>, который заменяет прежний тег <object> для встраивания видео Flash. Преимущества использования тега HTML5 <video> многочисленны. Это приносит не только минимализм и простоту видео-кода, но также и легкость поисковых ботов, чтобы правильно проиндексировать ваш видео-файл. Разработчики веб-сайтов могут добавлять видео на страницу так же, как они добавляют изображение, поскольку основная разметка, необходимая для </ video> <video> в HTML5, очень проста и понятна:
</ video> <video width = "320" height = "240" контролирует autoplay poster = "video.jpg"> <source src = "movie.mp4" type = "video / mp4" /> <source src = "movie.ogg" type = "video / ogg" /> Ваш браузер не поддерживает видео тег. </ Видео>
Такой код может быть легко составлен даже неопытным специалистом. Проще всего код может быть уменьшен до: <video src="movie.mp4" controls width="320" height="480"></video>
Атрибуты видео
Как видите, тег <video> используется так же, как и любые другие теги в HTML. Между открывающими и закрывающими тегами вы можете размещать различные атрибуты, чтобы получить нужный вам видеоплеер.
Некоторые из атрибутов являются логическими (например, элементы управления, цикл, приглушенный) — значение не требуется. Поэтому, включая или опуская их, вы устанавливаете значение «истина» или «ложь» соответственно.
Специалисты HTML5 также рекомендуют вставлять следующую строку в тег видео:
Видео не воспроизводится? <a href="pics/video.mp4">Download the file вместо.
управления
Браузеры, поддерживающие HTML5-видео, уже имеют встроенные видеоплееры. Все они включают в себя стандартный набор элементов управления: Play, Pause, Seek, Volume. Тем не менее, каждый браузер обеспечивает свой внешний вид для видеоплеера: от минимального подхода Chrome и IE до более сложных элементов управления Firefox, Opera и Safari.
Если вы хотите сохранить одинаковые элементы управления во всех браузерах или интегрировать проигрыватель с дизайном нашего веб-сайта, вы можете создавать собственные элементы управления с нуля. Вот несколько полезных ресурсов:
Источник видео
Тег <video> позволяет использовать несколько элементов <source>, которые могут ссылаться на одно и то же видео в разных форматах, например:
<source src = 'movie.webm' type = 'video / webm; codecs = "vp8.0, vorbis" '/> <source src = 'movie.ogv' type = 'video / ogg; codecs = "theora, vorbis" '/> <source src = 'movie.mp4' type = 'video / mp4; codecs = "avc1.4D401E, mp4a.40.2" '/>
Как видите, исходный тег имеет два атрибута, src и type. Атрибут «type» определяет тип MIME и, возможно, список кодеков, который помогает браузеру определить, может ли он декодировать файл. По умолчанию браузер будет использовать первый распознанный формат. Все современные браузеры поддерживают как минимум один видеоформат HTML5.
Поддержка браузера
Чтобы получить актуальную информацию о поддержке браузера, посетите страницу HTML5 YouTube.
Кодеки
Существует долгая дискуссия о том, какие видео форматы / кодеки следует использовать, и консенсус еще не достигнут. В результате в проекте спецификации HTML5 все ссылки на определенный кодек были удалены. Вместо этого были выдвинуты следующие creteria к видеокодеку:
Для видеоэлемента HTML5 было предложено три кодека: H.264, OGG Theora и WebM VP8. Вот их преимущества и недостатки.
H.264
Pros
Это дает хорошее качество видео и небольшой размер файла. Он выводит отличное видео как для мобильных устройств с низкой пропускной способностью, мобильных устройств с низкой пропускной способностью, так и для современных ПК с высокой пропускной способностью и всего, что между ними. Это бесплатно для конечных пользователей Интернета.
Cons
Базовые механизмы сжатия в H.264 запатентованы, и пользователи должны платить роялти за коммерческое использование лицензирующему консорциуму под названием MPEG-LA.
OGG Theora
Pros
Это кодек без лицензионных платежей и не обременен никакими известными патентами, кроме оригинальных патентов VP3, которые были лицензированы без лицензионных платежей.
Cons
Theora генерирует видео высокого качества со сравнительно большими размерами файлов. Кроме того, гораздо сложнее найти инструменты для конвертации в OGG Theora.
WebM VP8
Pros
В 2010 году Google приобрела On2 — компанию, стоящую за VP8, и опубликовала спецификацию видеокодеков с открытым исходным кодом, а все патенты — без роялти.
Cons
Хотя Google утверждает, что у WebM самое высокое качество видео среди всех веб-кодеков, большинство независимых источников считают, что либо H.264 немного лучше, либо разница между ними очень мала. Проблема в том, что может быть очень трудно найти инструменты для кодирования видео в WebM.
Пока не будет достигнут полный консенсус по вопросу о видеокодеках, веб-разработчикам приходится конвертировать видео во все эти три формата. Есть несколько полезных программ для подготовки видео HTML5:
Некоторые веб-мастера также используют HTML5 <video & ht; элемент с Flash-кодом, чтобы видео можно было воспроизводить в любом браузере, включая старые версии IE.
Без сомнения, HTML5-видео все еще имеет много преимуществ по сравнению с Flash. Тем не менее, остается дискуссионным, останутся ли H.264, WebM и Theora OGG форматами видео по умолчанию, поддерживаемыми в элементе video. А поскольку спецификация видеоформатов HTML5 во многом зависит от решений Apple, Microsoft и корпораций Google, будущее всего нового стандарта кажется расплывчатым, но все же многообещающим.