Поддержка браузерами HTML5
Стандарт HTML5 поддерживает всевозможные странные методы. В то же самое время он возрождает (и стандартизует) некоторые старые либеральные правила HTML и вводит передовые возможности, которые работают только в новейших браузерах.
Что касается браузерной совместимости, функциональные возможности HTML5 можно разбить на три категории:
- Возможности, которые уже работают . К этой категории принадлежат возможности, которые имеют высокий уровень поддержки, но официально не были частью стандарта HTML в прошлом (например, метод drag and drop). В нее так же входят возможности, которые можно реализовать для старых браузеров, приложив очень небольшие дополнительные усилия, наподобие семантических элементов.
- Возможности с поэтапной деградацией . Например, если у старого браузера имеются проблемы с использованием нового элемента , этот элемент позволит вам предоставить браузеру какое-либо другое средство проигрывания например плеер, использующий подключаемый модуль Flash. Это намного лучше, чем сообщение об ошибке, которое определенно нельзя назвать поэтапной деградацией. В эту категорию также входят второстепенные возможности из разряда примочек, на которые старые браузеры могут спокойно не обращать внимания, наподобие некоторых старых возможностей для работы с веб-формами (например, замещающий текст), и некоторые возможности форматирования из CSS3 (например, для скругления углов или отбрасывания теней).
- Возможности, требующие обходных решений JavaScript . Мотивацией для многих новых возможностей HTML5 послужили разработки, которые веб-программисты уже делали другим, более трудоемким, способом. Поэтому не стоит удивляться, что много из возможностей HTML5 можно дублировать с помощью хорошей библиотеки JavaScript (или, в худшем случае, написав энное количество строк кода собственного специализированного сценария JavaScript). Создание обходного решения JavaScript может быть очень трудоемкой задачей, поэтому, если вы посчитаете, что определенная возможность является необходимой и требует обходного решения JavaScript, вы можете просто решить использовать это обходное решение для всех страниц и отложить использование методов HTML5 на будущее.
Поддерживает ли браузер вашу разметку?
Последнее слово в вопросе, в каком объеме использовать HTML5, принадлежит разработчикам браузеров. Если браузер не поддерживает какую-либо возможность, нет никакого смысла использовать ее, несмотря на все, что говорится в стандарте. В настоящее время существуют четыре или пять основных браузеров (не считая браузеров для мобильных устройств с возможностью подключения к Интернету, таких как смартфоны и планшеты iPad).
У разработчика-одиночки нет никаких шансов протестировать каждую потенциальную возможность на каждом браузере, не говоря уже о возможности оценить поддержку ее в старых версиях браузеров, которые широко используются до сих пор.
К счастью, существует веб-сайт www.caniuse.com, который может помочь вам справиться с этой задачей. В нем даются подробности поддержки HTML5 во всех основных браузерах. И, самое приятное, он позволит вам выделить именно те возможности, которые вам требуются. Веб-сайт работает следующим образом:
-
Сначала выберите вкладку Tables, а потом вкладку Compatibility tables и выберите на ней требуемую вам возможность (или группу возможностей), установив соответствующие флажки:
Статистика популярности браузеров
Последним важным пунктом проблемы поддержки возможностей браузерами является статистика популярности конкретных браузеров. Иными словами, информация о том, сколько посетителей Паутины пользуется браузером, поддерживающим возможности, которые вы намереваетесь использовать в своей разметке.
Одним из хороших источников этой информации является популярный сайт GlobalStats. На странице сайта в раскрывающемся списке Statistic выберите вариант Browser. А вариант Browser Version позволит просмотреть популярность не только конкретного браузера, но и каждой из его версий. Результаты можно сузить, выбрав конкретный регион или страну в раскрывающемся списке Country/Region:
Сайт GlobalStats собирает статистические данные ежедневно с помощью кода слежения, который установлен на миллионах веб-сайтов. Однако для вашего сайта цифры могут быть совершенно другими. Например вот статистика для этого сайта, полученная через Google Analytics за тот же период:
Как видите пользователей современных браузеров Google Chrome, Opera и Firefox гораздо больше чем в статистике от GlobalStats. При этом пользователей Internet Explorer всего 6%, что в три раза меньше чем в общемировой статистике. Эта статистика очень сильно зависит от тематики сайта. Данный сайт создан в основном для IT-специалистов, которые редко используют устаревшие браузеры. Если посмотреть статистику какой-нибудь популярной социальной сети, то количество счастливых обладателей браузеров IE
Определение возможностей с помощью Modernizr
В течение нескольких следующих лет абсолютно реальным будет то обстоятельство, что некоторые посетители вашего веб-сайта будут пользоваться браузерами, не поддерживающими HTML5. Но это не должно остановить вас от использования возможностей этого стандарта при условии, что вы согласны вложить немного усилий в разработку обходных решений или возможности поэтапной деградации. В любом случае вам, скорее всего, потребуется некоторая помощь JavaScript. Обычно это делается таким образом: после загрузки вашей страницы браузером запускается специальный сценарий, который проверяет, поддерживает ли браузер определенную возможность.
К сожалению, т.к. в своей основе HTML5 является набором связанных стандартов, одного общего теста на поддержку возможностей не существует. Вместо этого требуется выполнить несколько десятков разных тестов, чтобы проверить наличие поддержки различных возможностей, при этом иногда даже требуется проверять, поддерживается ли определенная часть возможности, что очень быстро делает задачу тестирования весьма неприятной.
При проверке поддержки некоторой функциональности браузером обычно требуется найти возможность в программном объекте или создать объект и использовать его определенным образом. Но подумайте хорошенько, прежде чем приступать к написанию кода тестирования такого типа, т.к. с этой задачей очень легко наломать дров.
Например, код для проверки поддержки возможности браузерами может не работать на некоторых браузерах по той или иной непонятной причине или быстро устареть. Вместо этого подумайте о применении компактного, постоянно обновляемого инструмента Modernizr, который проверяет поддержку браузерами широкого диапазона возможностей HTML5 и связанных возможностей. Он также предоставляет классный метод для реализации поддержки резервных решений при использовании новых возможностей CSS3.
Проверка веб-страниц с помощью Modernizr выполняется так:
- Загрузите JavaScript-файл для Modernizr. Для этого в области Download Modernizr в верхней центральной части страницы нажмите кнопку Development. Обычно, имя этого файла будет похоже на modernizr-2.0.6.js. Точное имя зависит от используемой версии. Некоторые разработчики переименовывают этот файл, убирая номер версии, например modernizr.js. Это позволяет обновить файл Modernizr в будущем, не требуя поиска и корректировки ссылок на него в веб-страницах, в которых он используется. Код полной версии Modernizr несколько объемистый. Эта версия сценария предназначена для выполнения тестирования на стадии разработки веб-сайта. По окончании разработки, когда сайт можно публиковать для использования, можно создать облегченную версию сценария Modernizr, которая тестирует только требуемые возможности. Для этого загрузите версию Production, нажав одноименную кнопку в области Download Modernizr. Откроется страница, предлагающая выбрать возможности, поддержку которых вы хотите проверять (установив соответствующие флажки), а потом создать свою специальную версию сценария Modernizr, нажав кнопку Generate слева внизу страницы.
- Скопируйте файл сценария в папку, в которой находится веб-страница, требующая тестирования. Либо файл сценария можно поместить в подкаталог и подкорректировать должным образом путь к ней в ссылке JavaScript.
- В блоке тестируемой веб-страницы вставьте ссылку на файл сценария Modernizr. В следующем листинге показан пример вставки этой ссылки:
HTML5 - тестирование библиотеки Modernizr . HTML5 - тестирование библиотеки Modernizr Поддержка браузером -
Хотя в этом примере показан правильный способ проверки поддержки возможности, применяемый в нем подход к обработке неподдерживаемой возможности не идеален. Вместо того чтобы просто проинформировать (пусть даже и самым вежливым образом) посетителя вашего веб-сайта о том, что его браузер не поддерживает определенную функциональность вашего сайта, намного лучше будет реализовать какое-либо обходное решение, даже если это решение и не будет таким изящным или обладать всеми способностями заменяемой возможности HTML5. Например, если неподдерживаемая возможность — всего лишь какая-то несущественная примочка, которая бесполезна для посетителя сайта, то эту проблему можно вообще игнорировать.
Назван веб-браузер, наиболее совместимый с платформой HTML5
Консорциум World Wide Web Consortium (W3C) провел тестирование веб-браузеров, способных работать с новой платформой HTML5 и составил рейтинг самых инновационных браузеров, которые существуют на сегодняшний день.
Недавнее тестирование позволило экспертам определить степень «готовности» веб-обозревателей к работе с новой платформой — выяснилось, что наиболее прогрессивным решением оказался Edge от Microsoft.
В ходе тестирования «браузер по умолчанию» получил оценку в 100% по части совместимости с HTML5. Кроме того, специалисты протестировали поддержку приложением технологий для реализации специальных возможностей: чтение с экрана, соответствия API функциональности платформы, а также поддержки вариантов отображения контента для пользователей с ограниченными возможностями.
Конкуренты Edge — Safari, Chrome и Firefox — набрали 98%, 92% и 89% соответственно. Среди аутсайдеров оказался еще один продукт Microsoft — браузер Internet Explorer 11, который совместим с HTML5 только на 56%.
Впрочем, проведенный консорциумом тест тут же подвергся критике, поскольку оценка совместимости проводилась на браузере Google Chrome 62, в то время как актуальной считается версия 80. Не исключено, что при дальнейшем тестировании свежей сборки браузера Google удастся разделить первую строчку рейтинга с текущим лидером. HTML5 новая технология, с помощью которой ресурсы загружаются мгновенно, даже такие тяжелые сайты как Плей Фортуна.
Ранее сообщалось, что Министерство промышленности и информационных технологий Китайской народной республики совместно телекоммуникационной группой Huawei, государственными предприятиями China Unicom и China Telecom предложили ООН пересмотреть алгоритм работы Интернета.
Поддержка браузерами технологий HTML5 и CSS3 Текст научной статьи по специальности «Прочие социальные науки»
Аннотация научной статьи по прочим социальным наукам, автор научной работы — Новожилов Андрей Вячеславович, Акулов Геннадий Сергеевич
Исследованы вопросы перехода на новые технологии веб-программирования HTML5 и CSS3 , которые упрощают процесс создания интерактивных веб-сайтов за счет внедрения новых элементов и атрибутов. Проведено исследование уровня поддержки браузерами указанных технологий, выявлено, что не все браузеры на данный момент в полной мере поддерживают HTML5 и CSS3 . Рассмотрены такие браузеры, как Google Chrome, Opera, Safari, Firefox, Internet Explorer.
i Надоели баннеры? Вы всегда можете отключить рекламу.
Похожие темы научных работ по прочим социальным наукам , автор научной работы — Новожилов Андрей Вячеславович, Акулов Геннадий Сергеевич
Интеграция онлайн-трансляции в современные браузеры
Возможности использования html5 при создании элементов интерфейса обучающих систем
Технические вопросы и проблемы, возникающие при создании и эксплуатации системы дистанционного обучения на базе Moodle
Анализ поддержки технологии передачи потоковых данных в современных веб-браузерах применительно к использованию в дистанционном образовании
Конститутивные составляющие текста программного обеспечения
i Не можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.
BROWSERS SUPPORT OF HTML5 AND CSS
The problem of transition to the new web-programming technologies HTML5 and CSS3 are researched in the article. These technologies simplify the process of web-programming by introducing new elements and attributes. A study of the level of browser support these technologies, it is revealed that not all browsers at the moment to fully support HTML5 and CSS3 . Considered browsers such as: Google Chrome, Opera, Safari, Firefox, Internet Explorer.
Текст научной работы на тему «Поддержка браузерами технологий HTML5 и CSS3»
ПОДДЕРЖКА БРАУЗЕРАМИ ТЕХНОЛОГИЙ HTML5 И CSS3
© А.В. Новожилов, Г.С. Акулов
Ключевые слова: HTML5; CSS3; стандарты; технологии веб-программирования.
Исследованы вопросы перехода на новые технологии веб-программирования HTML5 и CSS3, которые упрощают процесс создания интерактивных веб-сайтов за счет внедрения новых элементов и атрибутов. Проведено исследование уровня поддержки браузерами указанных технологий, выявлено, что не все браузеры на данный момент в полной мере поддерживают HTML5 и CSS3. Рассмотрены такие браузеры, как Google Chrome, Opera, Safari, Firefox, Internet Explorer.
В течение последних лет в сети Интернет наблюдается бум развития и популяризации интерактивных веб-сайтов [1]. Серьезным шагом в этом направлении стало появление HTML5 — технологии, призванной сделать Интернет быстрее, проще и доступней для каждого, а также в связке с CSS3 заменить Adobe Flash во многих ее нишах. Дополнительно к этому HTML5 является единственным унифицированным разметочным языком, полноценно работающим наравне с родными языками программирования большинства современных мобильных операционных систем, таких как Android, iOS, Windows Mobile, Blackberry and WebOS [2].
Несмотря на то, что спецификация HTML5 еще целиком не готова, и W3C планирует полностью ее выпустить лишь к 2022 г., большинство современных веббраузеров уже сегодня осуществляет качественную поддержку многих возможностей, описанных в вышедших модулях упомянутой спецификации. Этому способствует сама модульная структура спецификации, что, в свою очередь, позволяет производителям вебобозревателей с каждой новой версией своих продуктов улучшать поддержку HTML5 и оказывать благоприятное влияние на растущую популярность этой технологии.
Данная технология может предоставить важные преимущества, способные оказать позитивное влияние на развитие интерактивных веб-сайтов, особенно если учесть тот факт, что в последнее время для работы в сети все чаще используются различные мобильные устройства, такие как современные сотовые телефоны и планшеты, доля рынка которых постоянно растет [3].
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web» [4]. CSS3 — это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта. Многие возможности, которые были труднодоступны в CSS2.1 и требовали использования дополнительных внешних программ, написания скриптов (JavaScript, VBScript), могут легко достигаться в CSS3 за счет использования новых свойств оформления.
Отметим, что новые CSS3 свойства поддерживаются только в современных браузерах: IE9+, Firefox 3.6+, Opera 10+, Chrome 12+, Safari 5+. Наиболее полно под-
держивающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera). Бывший когда-то самым распространенным браузером Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но все еще содержит значительное количество ошибок. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.
Для проверки поддержки браузером веб-стандартов (в т. ч. и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.
В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель также понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.
В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.
В браузере Mozilla при поддержке этого свойства под собственным «рабочим» названием -moz-box-sizing ввели еще одно значение -padding-box, таким образом, создав третью блочную модель, в которой width — это размер содержимого и отступов блока, не включая рамки.
HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете [5]. Это пятая версия HTML-стандарта (изначально созданного в 1990 г. и последней версией которого являлся HTML4, стандартизированный в 1997 г.) и находится в стадии разработки по состоянию на февраль 2013 г. Основной ее целью является улучшение языка,
Рис. 1. График динамики уровня поддержки браузерами технологии HTML5
поддерживающего работу с новейшими мультимедийными приложениями, при этом сохраняя легкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.).
В HTML5 появляется множество синтаксических особенностей. Например, элементы , и , а также возможность использования структурированной векторной графики. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам [6].
Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 г. После этого глава компании Apple Inc. Стив Джобс написал публичное письмо, заголовок которого гласил: «Мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash. Но разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.
Технология HTML5 имеет несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных и строчных элементов, например, (блок навигации по сайту), (обычно относится к нижней части страницы или последней строке HTML-кода) или и вместо . Некоторые устаревшие элементы, которые можно было использовать в HTML, были исключены, включая чисто оформительские элементы, такие как и , чьи эффекты выполняются с помощью каскадных таблиц стилей [7].
Наиболее популярным тестом в сети Интернет, позволяющим проверить совместимость используемого
посетителем браузера с будущим стандартом HTML5, является тест html5test.com, который оценивает браузер пользователя и ставит ему оценку от 0 до 550. На рис. 1 представлен график динамики уровня поддержки браузерами технологии HTML5 по данным html5test.com [8]. Стоит отметить, что использование последних версий браузеров позволит работать с сайтами, написанными на технологиях HTML5 и CSS3. Однако еще многие пользователи используют старые версии браузеров.
Несмотря на то, что IE отстает по многим показателям поддержки технологий HTML5 и CSS3, процент использования этого браузера достаточно высок. На рис. 2 представлен процент использования разных браузеров по данным Statcounter [9].
Таким образом, на данный момент HTML5 и CSS3 поддерживают не все браузеры, однако Google Chrome, Opera и Mozilla FireFox обеспечивают максимально возможную поддержку новых стандартов. Технологии HTML5 и CSS3 заметно упрощают процесс создания интерактивных веб-сайтов, и скорее всего большинство пользователей со временем перейдет на браузеры с поддержкой HTML5 и CSS3.
Рис. 2. Процент использования браузеров по Statcounter
1. Clarke A. Hardboiled Web Design. Penarth, UK, 2010. 400 p.
2. Meier R., Mahemoff M. Google I/O 2011: HTML5 versus Android: Apps or Web for Mobile Development? URL: http://www.you-tube.com/watch?v=4f2Zky_YyyQ (accessed: 29.10.2013).
3. Доля рынка мобильных устройств. URL: http://www.netmarket-share.com/ (дата обращения: 29.10.2013).
4. История создания и развития CSS3. URL: http://kulibaba.net/web-development/css (дата обращения: 29.10.2013).
5. Результат исследования рынка технологий HTML5. URL: http://www.advertology.ru/article115910.htm (дата обращения: 20.06.2013).
6. Differences from HTML4. W3C Working Draft 28 May 2013. URL: http://www.w3.org/TR/html5-diff/ (дата обращения: 30.10.2013).
7. Pilgrim M. Dive into HTML5. URL: http://diveintohtml5.info/ (accessed: 25.10.2013).
8. HTML5 Test. Timeline. URL: http://html5test.com/results/desk-
top.html (дата обращения: 25.10.2013).
9. Статистика браузеров за октябрь 2013 г. URL: http://webrowser.ru/ rynok/statistika-internet-brauzerov-v-oktyabre-2013-goda.html (дата обращения: 11.10.2013).
Поступила в редакцию 20 ноября 2013 г.
Novozhylov A.V., Akulov G.S. BROWSERS SUPPORT OF HTML5 AND CSS3
The problem of transition to the new web-programming technologies HTML5 and CSS3 are researched in the article. These technologies simplify the process of web-programming by introducing new elements and attributes. A study of the level of browser support these technologies, it is revealed that not all browsers at the moment to fully support HTML5 and CSS3. Considered browsers such as: Google Chrome, Opera, Safari, Firefox, Internet Explorer.
Key words: HTML5; CSS3; standards; technology; webprogramming.
Новожилов Андрей Вячеславович, Тамбовский государственный университет им. Г.Р. Державина, г. Тамбов, Российская Федерация, бакалавр по направлению подготовки «Информационная безопасность» института математики, физики и информатики, e-mail: novozhilov_andrey68@inbox.ru
Novozhylov Andrey Vyacheslavovich, Tambov State University named after G.R. Derzhavin, Tambov, Russian Federation, Candidate for Bachelor’s Degree of Direction of Preparation of “Information Security” of Mathematics, Physics and Informatics Institute, e-mail: novozhilov_andrey68@inbox.ru
Акулов Геннадий Сергеевич, Тамбовский государственный университет им. Г.Р. Державина, г. Тамбов, Российская Федерация, бакалавр по направлению подготовки «Информационная безопасность» института математики, физики и информатики, e-mail: genaj4@rambler.ru
Akulov Gennadiy Sergeyevich, Tambov State University named after G.R. Derzhavin, Tambov, Russian Federation, Candidate for Bachelor’s Degree of Direction of Preparation of “Information Security” of Mathematics, Physics and Informatics Institute, e-mail: genaj4@rambler.ru
Поддерживаемые форматы аудио и видео
В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.
По поводу войны мультимедийных форматов для HTML5 у веб-разработчиков имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео HTML5 находятся в состоянии безнадежной конфронтации и на ком лежит главная вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого разработчика браузеров есть свои оправдания и объяснения, каким стандартам мультимедиа отдать предпочтение.
Небольшие разработчики, такие как Mozilla, создатели браузера Firefox и разработчики Opera, не желают платить непомерно высокую для них цену за лицензию на использование таких популярных стандартов, как MP3 для аудио или H.264 для видео (хотя поддержка этих стандартов включена в версии Firefox 24 и выше, после солидного спонсирования от Google ;). И их трудно винить за это, ведь они предоставляют свои продукты бесплатно.
У компаний покрупнее (таких как Microsoft, Google или Apple) имеются свои оправдания почему надо избегать нелицензированных стандартов. Они жалуются, что качество работы этих стандартов будет ниже (в настоящее время они не поддерживают аппаратное ускорение) и что они не так широко используются, как запатентованные стандарты, такие как, например, H.264, который используется в камкордерах, проигрывателях Blu-Ray и во многих других разных устройствах.
Но самая большая проблема может состоять в том, что никто по-настоящему не уверен, что эти нелицензированные стандарты не связаны с чьей-либо интеллектуальной собственностью. Если такие связи имеются, используя эти стандарты, крупные компании наподобие Microsoft или Apple, делают себя уязвимыми к дорогостоящим искам за нарушение патентных прав, которые могут тянуться годами.
Знакомимся с форматами
Официальный стандарт HTML5 не требует, чтобы браузеры поддерживали какой-либо конкретный аудио- или видеоформат. (Ранние версии стандарта содержали такую рекомендацию, но в результате интенсивного лоббирования она была отменена.) Вследствие этого разработчики браузеров могут выбирать форматы, какие они хотят поддерживать, несмотря на то обстоятельство, что разные форматы органически несовместимы друг с другом. Список и краткое описание основных форматов, используемых в настоящее время, приведен в таблице:
| Формат | Описание | Расширение файла | MIME тип |
|---|---|---|---|
| MP3 | Самый популярный аудиоформат в мире. Но стоимость лицензии делает его непрактичным для небольших разработчиков, наподобие Opera | mp3 | audio/mp3 |
| Ogg Vorbis | Открытый, бесплатный стандарт, предоставляющий высококачественное сжатое аудио, сравнимое с MP3 | ogg | audio/ogg |
| WAV | Первоначальный формат для сырого цифрового аудио. Не использует сжатие, поэтому файлы невероятно большого объема и непригодны для большинства интернет-приложений | wav | audio/wav |
| H.264 | Промышленный стандарт для кодирования видео, особенно при работе с видео высокой четкости. Применяется в бытовых устройствах (таких как проигрыватели и камкордеры Blu-Ray), на видеообменных сайтах (таких как YouTube и Vimeo) и в браузерных модулях расширения (таких как Flash и Silverlight) | mp4 | video/mp4 |
| Ogg Theora | Открытый, бесплатный стандарт для видео, созданный разработчиками аудиостандарта Vorbis. Качество и производительность ниже стандарта H.264, но достаточно высокие, чтобы удовлетворить потребности большинства пользователей | ogv | video/ogg |
| WebM | Новейший бесплатный видеоформат, созданный Google на основе приобретенного ими VP8. Критики доказывают, что его качество еще не на уровне видео H.264 и он может содержать скрытые связи с другими патентами, что может вызвать лавину судебных исков в будущем. Тем не менее, WebM является наилучшим выбором для будущего открытого видео | webm | video/webm |
В этой таблице также указаны рекомендуемые расширения файлов для мультимедиа. Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла в действительности применяются три разных стандарта. Первым, наиболее очевидным, стандартом является видеокодек, применяемый для сжатия видео в поток данных. В качестве примера можно назвать такие кодеки, как H.264, Theora и WebM.
Вторым является аудиокодек, который применяется для сжатия одной или нескольких аудиодорожек. Например, для видео в формате H.264 обычно используется звук в формате MP3, а для видео Theora — звук Vorbis. Наконец, формат контейнера применяется для упаковки видео и аудио вместе с описательной информацией и, необязательно, другими безделушками типа изображений и субтитров. Часто расширение файла обозначает формат контейнера, т.е. расширение mp4 означает контейнер типа MPEG-4, расширение ogv — контейнер Ogg и т.п.
Но не все так просто, т.к. формат контейнера поддерживает несколько разных аудио- и видеостандартов. Например, популярный контейнер Matroska (mkv) может содержать видео в формате H.264 или Theora. Чтобы не усложнять этот вопрос излишними подробностями, в приведенной таблице каждый видеоформат соотнесен с наиболее употребляемым для его упаковки контейнером, для которого также обеспечивается наиболее высокий уровень поддержки для Интернета.
В приведенной таблице также указан требуемый тип MIME, который нужно установить в настройках вашего веб-сервера. Если не указать правильный тип MIME, браузеры могут заупрямиться с воспроизведением вполне качественного мультимедийного файла.
Поддержка браузерами форматов мультимедиа
Все аудио- и видеоформаты в мире будут вам бесполезны, если вы не знаете, как они поддерживаются разными браузерами. Разобраться в этом вопросе вам поможет следующие таблицы, в которых показаны поддержки основными браузерами аудио- и видеоформатов:
| IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android | |
| MP3 | 9 | 24 | 5 | 3.1 | — | 3 | — |
| Ogg Vorbis | — | 3.6 | 5 | — | 10.5 | — | — |
| WAV | — | 3.6 | 8 | 3.1 | 10.5 | — | — |
| IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android | |
| H.264 | 9 | 24 | 5 | 3.1 | — | 4 | 2.3 |
| Ogg Theora | — | 3.5 | 5 | — | 10.5 | — | — |
| WebM | 9 (при установке кодеков) | 4 | 6 | — | 10.6 | — | 2.3 |
Поддержка этих форматов мобильными браузерами представляет особый вид проблем. Прежде всего, это нерегулярность работы. Некоторые функции, такие как автоматическое воспроизведение и повтор, могут не поддерживаться, а некоторые устройства могут воспроизводить видео только в специализированном проигрывателе, а не прямо в окне на веб-странице. А еще видео для мобильных устройств обычно нужно кодировать с кадром меньшего размера и худшего качества.
Если вы хотите, чтобы видео проигрывалось на мобильных устройствах, примите за правило кодировать его в формате H.264 Baseline Profile (а не в формате High Profile). Для телефонов iPhone и под управлением операционной системы Android следует использовать размер 640×480, а для BlackBerry — 480×360. Многие программы кодирования имеют предварительные настройки, с помощью которых можно создать видео, оптимизированное для мобильных устройств.
Множество форматов: как понравиться всем браузерам
Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда состоит в том, что ни один аудио- или видеоформат не будет работать на всех браузерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы должны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кроме этого, вам, скорее всего, нужно будет организовать резервное решение Flash для посетителей, которые пользуются браузерами, не признающими HTML5, такими как, например, IE8.
К счастью, элементы и поддерживают достаточно хорошую систему предоставления резервных решений, которая была хорошо отлажена новаторами веб-технологий. Но, к сожалению, война форматов означает, что содержимое нужно будет кодировать, по крайней мере, дважды, что является затратным процессом по времени, процессорным ресурсам и дисковому пространству.
Но прежде чем приступать к работе, нужно определиться со стратегией поддержки браузеров, которые не признают HTML5. По большому счету, веб-разработчики имеют на выбор два хороших пути:
Использовать Flash в качестве основного решения, а HTML5-решение в качестве резервного
Таким образом, все посетители вашего сайта смогут использовать Flash, за исключением тех, на чьих браузерах этот модуль не установлен. Эта стратегия имеет смысл, если вы уже предоставляете на своем сайте видеосодержимое посредством Flash, но хотите еще привлечь пользователей iPad и iPhone.
Использовать HTML5 в качестве основного решения, а Flash-решение — в качестве резервного
Таким образом, все посетители получают HTML5-видео и/или аудио, за исключением тех, кто использует старые браузеры, которые получают Flash-содержимое. Если вы пойдете этим путем, можно также поддерживать меньшее число форматов HTML5. В таком случае посетители, чьи браузеры хотя и поддерживают HTML5-мультимедиа, но не поддерживают предоставляемые вами форматы, также получат Flash-содержимое. Так как будущее за этим подходом, то он является предпочтительным при условии, что текущие ограничения HTML5 видео и аудио — вам не помеха.
В следующих разделах мы будем воплощать второй подход в жизнь. Таким образом, мы обеспечим для браузеров чисто HTML5-решение во всех случаях, когда это возможно.
Элемент
Первым шагом в обеспечении поддержки нескольких форматов будет удаление атрибута src из элемента или и замена его вложенным списком элементов . Например:
В данном случае элемент содержит два элемента , каждый из которых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает первый, формат которого он поддерживает. В частности, Opera возьмет файл mysong.ogg, a Firefox, Safari и Chrome — файл mysong.mp3.
Теоретически, браузер может определить, поддерживает он или нет конкретный файл, загрузив и исследовав небольшую его часть. Но лучшим подходом будет использовать атрибут type, чтобы предоставить правильный MIME-тип. Таким образом, браузер попытается загрузить только тот файл, который он, как считает, может воспроизвести.
Этот же метод применяется и для элемента . В следующем листинге показан пример указания видеосодержимого в двух разных форматах — H.264 и Theora:
В этом примере следует отметить одну новую особенность. При использовании разных видеоформатов файл в формате H.264 всегда должен быть в списке первым. В противном случае он не будет проигрываться на старых устройствах iPad под управлением iOS 3x. (Эта проблема была решена в операционной системе iOS 4, но размещение файла H.264 вверху списка ничем ничему не вредит.)
Так сколько же видеоформатов следует использовать? Чтобы прикрыть все тылы необходимо использовать форматы H.264 и Theora для основного решения HTML5 и Flash для резервного. Для лучшего качества видео формат Theora можно заменить форматом WebM. Или же можно совсем разойтись и включить все версии своего видео — H.264, Theora и WebM в указанном порядке. Версия WebM идет перед версией Theora для того, чтобы браузеры, которые поддерживают эти формата, выбрали видео лучшего качества.
Ну а если гулять по полной программе, то можно создать одну веб-страницу с видео как для настольных компьютеров, так и для мобильных устройств. В таком случае нужно не только предоставить файлы в формате H.264 и Theora, но также создать версии видеофайлов меньшего объема, более подходящие для менее мощных мобильных устройств и интернет-подключений с меньшей пропускной способностью.
Резервное решение Flash
Испокон веков все браузеры обрабатывают нераспознаваемые теги одинаково — игнорируют их. Например, если Internet Explorer 8 встречается открывающий тег элемента , он с ветерком проносится мимо него, не затрудняясь ознакомиться с атрибутом src и другими параметрами этого элемента. Но при всем этом, браузеры не игнорируют содержимое внутри неизвестного им элемента, что является важной особенностью. Это означает, что в случае следующей разметки:
браузеры, которые не понимают HTML5, ведут себя, как будто бы они видели вот эту разметку:
Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.
Эта особенность и лежит в основе бесшовного предоставления резервного решения для старых браузеров.
Теперь, после того как мы научились вставлять резервное содержимое, надо решить, какое именно содержимое вставлять. Одним из примеров плохого резервного содержимого будет текстовое сообщение, наподобие предыдущего «Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5». Посетители веб-сайтов считают сообщения такого типа крайне невежливыми и, скорее всего, не возвратятся на сайт, приветствующий их таким образом.
Правильный подход — это включить в качестве резервного содержимого другое работоспособное видеоокно, иными словами, любое содержимое, которое бы пользовалось на обычной видеостранице, т.е. странице без поддержки HTML5. Можно использовать видеопроигрыватель Flash (или аудиопроигрыватель Flash для аудио). К счастью, в Интернете существует масса видеопроигрывателей Flash, многие из которых бесплатные, по крайней мере, для некоммерческого использования. И большинство из них поддерживает формат H.264, который вы уже, наверное, используете для HTML5-видео.
В следующем листинге приведен пример использования в качестве резервной решения в элементе проигрывателя Flowplayer:
Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента :
Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.