Поддерживаемые форматы аудио и видео

175

Веб-программирование — HTML5 — Поддерживаемые форматы аудио и видео

В рассмотренных ранее примерах использовались два популярных стандарта: 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, браузеры могут заупрямиться с воспроизведением вполне качественного мультимедийного файла.

Поддержка браузерами форматов мультимедиа

Все аудио- и видеоформаты в мире будут вам бесполезны, если вы не знаете, как они поддерживаются разными браузерами.

Разобраться в этом вопросе вам поможет следующие таблицы, в которых показаны поддержки основными браузерами аудио- и видеоформатов:

Поддержка браузерами аудиоформатов HTML5
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 — —
Поддержка браузерами видеоформатов HTML5
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.

К счастью, элементы <audio> и <video> поддерживают достаточно хорошую систему предоставления резервных решений, которая была хорошо отлажена новаторами веб-технологий. Но, к сожалению, война форматов означает, что содержимое нужно будет кодировать, по крайней мере, дважды, что является затратным процессом по времени, процессорным ресурсам и дисковому пространству.

Но прежде чем приступать к работе, нужно определиться со стратегией поддержки браузеров, которые не признают HTML5. По большому счету, веб-разработчики имеют на выбор два хороших пути:

Использовать Flash в качестве основного решения, а HTML5-решение в качестве резервного

Таким образом, все посетители вашего сайта смогут использовать Flash, за исключением тех, на чьих браузерах этот модуль не установлен. Эта стратегия имеет смысл, если вы уже предоставляете на своем сайте видеосодержимое посредством Flash, но хотите еще привлечь пользователей iPad и iPhone.

Использовать HTML5 в качестве основного решения, а Flash-решение — в качестве резервного

Таким образом, все посетители получают HTML5-видео и/или аудио, за исключением тех, кто использует старые браузеры, которые получают Flash-содержимое. Если вы пойдете этим путем, можно также поддерживать меньшее число форматов HTML5. В таком случае посетители, чьи браузеры хотя и поддерживают HTML5-мультимедиа, но не поддерживают предоставляемые вами форматы, также получат Flash-содержимое. Так как будущее за этим подходом, то он является предпочтительным при условии, что текущие ограничения HTML5 видео и аудио — вам не помеха.

В следующих разделах мы будем воплощать второй подход в жизнь. Таким образом, мы обеспечим для браузеров чисто HTML5-решение во всех случаях, когда это возможно.

Элемент <source>

Первым шагом в обеспечении поддержки нескольких форматов будет удаление атрибута src из элемента <video> или <audio> и замена его вложенным списком элементов <source>. Например:

<audio controls>
   <source src="mysong.mp3" type="audio/mp3">
   <source src="mysong.ogg" type="audio/ogg">
</audio>

В данном случае элемент <audio> содержит два элемента <source>, каждый из которых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает первый, формат которого он поддерживает. В частности, Opera возьмет файл mysong.ogg, a Firefox, Safari и Chrome — файл mysong.mp3.

Теоретически, браузер может определить, поддерживает он или нет конкретный файл, загрузив и исследовав небольшую его часть. Но лучшим подходом будет использовать атрибут type, чтобы предоставить правильный MIME-тип. Таким образом, браузер попытается загрузить только тот файл, который он, как считает, может воспроизвести.

Этот же метод применяется и для элемента <video>. В следующем листинге показан пример указания видеосодержимого в двух разных форматах — H.264 и Theora:

<video controls>
   <source src="video. mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">
</video>

В этом примере следует отметить одну новую особенность. При использовании разных видеоформатов файл в формате 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 встречается открывающий тег элемента <video>, он с ветерком проносится мимо него, не затрудняясь ознакомиться с атрибутом src и другими параметрами этого элемента. Но при всем этом, браузеры не игнорируют содержимое внутри неизвестного им элемента, что является важной особенностью. Это означает, что в случае следующей разметки:

<video controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">
   <p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5.</p>
</video>

браузеры, которые не понимают HTML5, ведут себя, как будто бы они видели вот эту разметку:

<p>Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5. </p>

Эта особенность и лежит в основе бесшовного предоставления резервного решения для старых браузеров.

Теперь, после того как мы научились вставлять резервное содержимое, надо решить, какое именно содержимое вставлять. Одним из примеров плохого резервного содержимого будет текстовое сообщение, наподобие предыдущего «Если вы видите эту надпись, значит ваш браузер не поддерживает видео HTML5». Посетители веб-сайтов считают сообщения такого типа крайне невежливыми и, скорее всего, не возвратятся на сайт, приветствующий их таким образом.

Правильный подход — это включить в качестве резервного содержимого другое работоспособное видеоокно, иными словами, любое содержимое, которое бы пользовалось на обычной видеостранице, т.е. странице без поддержки HTML5. Можно использовать видеопроигрыватель Flash (или аудиопроигрыватель Flash для аудио). К счастью, в Интернете существует масса видеопроигрывателей Flash, многие из которых бесплатные, по крайней мере, для некоммерческого использования. И большинство из них поддерживает формат H.264, который вы уже, наверное, используете для HTML5-видео.

В следующем листинге приведен пример использования в качестве резервной решения в элементе <video> проигрывателя Flowplayer:

<video controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">
   <object
      data="flowplayer-3.2.7.swf" 
      type="application/x-shockwave-flash">
          <param name="movie" value="flowplayer-3.2.7.swf">
          <param name="flashvars" value='config={"clip":"video.mp4"}'>
  </object>
</video>

Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента <object>, в который вставляем элемент <video> непосредственно перед закрытием тега </object>:

<object
      data="flowplayer-3. 2.7.swf" 
      type="application/x-shockwave-flash">
          <param name="movie" value="video.mp4">
          <video controls>
              <source src="video.mp4" type="video/mp4">
              <source src="video.ogv" type="video/ogg">
          </video>
</object>

Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.

HTML5 | это… Что такое HTML5?


HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году[1]) и находится в стадии разработки по состоянию на ноябрь 2012 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.).

Следуя своим непосредственным предшественникам HTML 4.01 и XHTML 1.1, HTML5 отвечает наблюдениям о том, что HTML и XHTML в общем использовании во всемирной паутине HTML5 является смесью особенностей, представленных различными спецификациями, включая спецификации программного обеспечения, такими как веб-браузеры, признанными в общей практике, а также смесью множества синтаксических ошибок, возникающих в существующих веб-документах. HTML5 — также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений. [2]

   HTML
  • HTML и HTML5
  • Динамический HTML
  • XHTML
  • XHTML Mobile Profile и CHTML
  • Canvas
  • Кодировки символов
  • Document Object Model
  • Семейство шрифтов
  • Редактор HTML
  • Элементы HTML
  • Мнемоники в HTML
  • Фреймы HTML
  • HTML5 audio и HTML5 video
  • Скрипты в HTML
  • Браузерный движок
  • Quirks mode
  • Таблицы стилей
  • Каскадные таблицы стилей
  • Unicode и HTML
  • W3C и WHATWG
  • Цвета HTML
  • Web Storage
  • WebGL
  • Сравнение
    • языков разметки документов
    • браузеров
    • браузерных движков для
      • HTML
      • HTML5
        • HTML5 Canvas
        • HTML5 Media
      • XHTML (1.1)

В HTML5 появляется множество синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например, <a> <menu> и <cite> были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5.[2] HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами.[3]

Содержание

  • 1 История
  • 2 W3C процесс стандартизации
    • 2. 1 Разметка
    • 2.2 Новые API
    • 2.3 XHTML5
    • 2.4 Обработка ошибок
  • 3 Отличия от HTML4.01 и XHTML1.x
  • 4 Логотип HTML5
  • 5 Пример веб-страницы HTML5
  • 6 См. также
  • 7 Примечания
  • 8 Ссылки
  • 9 Литература

История

Рабочая группа по разработке Гипертекстовых Прикладных Технологий в Веб (WHATWG) начала работу над новым стандартом в 2004 году, когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года.[4] В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истек, и решил не возобновлять его. В настоящий момент W3C и WHATWG работают вместе над разработкой HTML5.[5]

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 года. После этого глава компании Apple Inc. Стив Джобс[6][7][8][9] написал публичное письмо, заголовок которого гласил: «мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash. [10] По этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые намекали, что, хотя HTML5 и обеспечивает расширенную функциональность, разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.[11]

W3C процесс стандартизации

WHATWG начала работу над спецификацией в июне 2004 года под названием Web Applications 1.0.[12] С января 2011 года спецификация в Draft Standard (Стандартизация проекта) утверждается в WHATWG, Working Draft (рабочий проект) утверждается в W3C. Ян Хиксон из компании Google является редактором HTML5.[13]

Спецификация HTML5 была принята в качестве точки начала работы над новым HTML рабочей группой W3C в 2007 году. Эта рабочая группа опубликовала спецификацию как первый публичный рабочий проект 22 января 2008 года.[14] Спецификация — это текущая работа, ожидают, что она останется на несколько лет, хотя части HTML5 собираются закончить и реализовать в браузерах до того момента, когда вся спецификация достигнет финального статуса «Рекомендовано». [15]

Согласно расписанию W3C, предполагалось, что HTML5 получит рекомендации W3C в конце 2010 года. Однако оценка первого публичного рабочего проекта была перенесена на 8 месяцев, ожидалось, что одобрения и Last Call и Candidate Recommendation будут получены в 2008 году[16], но в январе 2011 года он все ещё в стадии рабочего проекта в W3C.[17] HTML5 из WHATWG получило одобрение от Last Call с Октября 2009 года.[18][19]

Ян Хиксон, редактор спецификации HTML5, ожидает достижения Candidate Recommendation в течение 2012 года.[20] Для того чтобы спецификация получила статус «W3C рекомендована», необходимы две законченные на 100 % и полностью взаимодействующие реализации.[20] В интервью с TechRepublic Хиксон предполагает, что это случится в 2012 году или позже.[21] Однако многие части спецификации стабильны и могут быть реализованы в продуктах:

«Некоторые части уже относительно стабильны, и сегодня внедрения, которые уже вполне близки к завершению, могут быть использованы».

—WHAT Working Group, Когда HTML5 будет закончен?[20]

В декабре 2009 года WHATWG переключилась на универсальную модель разработки для спецификации HTML5.[22] W3C всё ещё будет продолжать публиковать кадры со спецификацией HTML5.[23]

14 февраля 2011 года W3C увеличил срок работы для рабочей группы HTML с промежуточными отчетами для HTML5. Рабочая группа предполагала продвинуть HTML5 в Last Call, приглашая к полному соединению W3C, чтобы подтвердить техническое отсутствие дефектов в спецификации в мае 2011 года. Затем группа переключается на испытание своей реализации. W3C также разрабатывает всестороннюю проверку, чтобы добиться широкой функциональной совместимости для полной спецификации 2014 года — ожидаемой даты для Рекомендации.[24]

«Даже как инновационное продолжение, продвижение HTML5 в «Рекомендуемое» обеспечивает всю веб-экосистему стабильным, проверенным и взаимодействующим стандартом. Решение наметить внедрение HTML5 в Last Call в мае 2011 года было важным шагом для урегулирования производственных ожиданий. Сегодня мы сделали следующий шаг, объявив о намерении осуществления цели с получением рекомендации к 2014 году.»

—Джеф Джэйф, Генеральный директор W3C[24]

Разметка

HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например, <nav> (блок навигации по сайту), <footer> (обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>.[25][26][27] Некоторые устаревшие элементы, которые можно было использовать в HTML 4. 01, были исключены, включая чисто оформительские элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью Каскадных таблиц стилей. Также в поведении веб снова заострено внимание на важности скриптов DOM (например, Javascript).

Синтаксис HTML5 больше не базируется на SGML, несмотря на подобие его разметки. Однако он был разработан обратно совместимым с обычным парсингом более старых версий HTML. В HTML5 применяется новая вводная строка, которая выглядит, как Объявление типа документа в SGML, <!DOCTYPE html>, которая запускает соответствующий стандартам режим рендеринга.[28] С 5 января 2009 года HTML5 также включает в себя Web Forms 2.0, ранее бывшие отдельной спецификацией WHATWG.

Новые API

В дополнение к определению разметки HTML5 устанавливает скриптовый интерфейс прикладного программирования (API).[29] Существующий интерфейс DOM расширен и фактически особенности зарегистрированы. Также существуют новые API, например:

  • элемент холст для непосредственного метода рисования в 2D. Смотрите спецификацию Canvas 2D API Specification 1.0[30]
  • контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео[31]
  • хранение баз данных оффлайн[32]
  • редактирование документа
  • Drag-and-drop
  • управление историей браузера
  • тип MIME и регистрация обработчика протокола
  • микроданные

Не все выше перечисленные технологии включены в спецификацию W3C HTML5, хотя они есть в спецификации WHATWG HTML.[33] Немного связанных технологий, которые не являются частью ни одной из спецификаций, следуют далее. W3C публикует спецификации для них отдельно.

  • геолокация
  • база данных SQL для Web, внутренняя база данных (больше не поддерживаемая)[34]
  • Индексированная база данных API, индексирование по типу ключ-значение (прежде — WebSimpleDB). [35]
  • Файл API, дескриптор обновления файлов и управления ими.[36]
  • Работа с системой. Этот API предназначен для того, чтобы обеспечить хранение информации со стороны клиента без управления базами данных.[37]
  • Запись в файл, использование API для записи в файл информации из приложения.[38]

XHTML5

XHTML5 — это XML-сериализация языка HTML5. Документы XML должны быть снабжены XML Internet media type, например, application/xhtml+xml или application/xml.[39] XHTML5 требует строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME/содержимого: тип медиа, который вы выберете, определит, какой тип документа должен быть использован.[40] В HTML5 и XHTML5 doctype html необязателен и может быть просто пропущен.[41] HTML, который был написан, чтобы соответствовать техническим требованиям и HTML и XHTML — и который производит то же DOM дерево, разбирающее HTML или XML — назван многоязычным. [42]

Обработка ошибок

Спецификация HTML5 предъявляет требования как к юзер-агентам (браузерам), так и к документам. Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM). Чёткое определение требований к юзер-агентам делается с целью достижения совместимости между браузерами разных производителей. Так же, как и требования к синтаксису разметки документов с целью корректного отображения их в различных браузерах.[43] В старых версиях браузеров новые теги HTML5 просто игнорируются.

Отличия от HTML4.01 и XHTML1.x

Ниже представлен список отличий и несколько необычных примеров:

  • Новое правило синтаксического анализа
  • Возможность использовать встроенные SVG и MathML в text/html
  • Новые элементы: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
  • Новые типы средств управления за формой: dates and times, email, url, search, number, range, tel, color[44]
  • Новые атрибуты: charset (в meta), async (в script)
  • Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data-* (пользовательские атрибуты данных)
  • Элементы, которые будут исключены: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

Полный список изменений в HTML5 представляется в обновляющемся рабочем проекте W3C «Отличия HTML5 от HTML4» (последняя версия от 29 марта 2012). [45]

Логотип HTML5

Логотип HTML5

18 января 2011 года W3C ввел логотип, чтобы представить использование или добавить интерес к HTML5. В отличие от других знаков, выпущенных ранее компанией W3C, он не подразумевает соответствие определенному стандарту. С 1 апреля 2011 года этот логотип считается официальным.[46]

Во время первого показа его публике, W3C объявил логотип HTML5 как символ «универсальной визуальной идентификации данных для широкого набора открытых Веб-технологий, включая HTML, CSS, SVG, WOFF и другие».[47] Некоторые защитники веб-стандартов, включая и The Web Standards Project, раскритиковали это определение HTML5 как обобщенное и размытое понятие.[47] Тремя днями позже W3C ответил на отзыв сообщества и изменил определение логотипа, убрав перечисление связанных технологий.[48] Затем W3C заявил, что логотип «представляет HTML5, краеугольный камень для современных Веб приложений». [46]

Пример веб-страницы HTML5

<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>(Это title) Пример страницы на HTML5</title>
  </head>
  <body>
    <header>
      <hgroup>
         <h2>Заголовок "h2" из hgroup</h2>
         <h3>Заголовок "h3" из hgroup</h3>
      </hgroup>
    </header>
    <nav>
      <a href=link1.html>Первая ссылка из блока "nav"</a>
      <a href=link2.html>Вторая ссылка из блока "nav"</a>
    </nav>
    <section>
      <article>
        <h2>Заголовок статьи из блока "article"</h2>
        <p>Текст абзаца статьи из блока "article"</p>
          <details>
            <summary>Блок "details", текст тега "summary"</summary>
            <p>Абзац из блога "details"</p>
          </details>
      </article>
    </section>
    <footer>
      <time>Содержимое тега "time" блока "footer"</time>
      <p>Содержимое абзаца из блока "footer"</p>
    </footer>
  </body>
</html>

См.

также
  • The cache manifest in HTML5
  • Canvas (HTML)
  • Сравнение браузеров (HTML5)
  • Comparison of layout engines (HTML5)
  • CSS 3
  • HTML5 для мобильных устройств
  • HTML5 video
  • HTTP(P2P)
  • Microdata (HTML5)
  • WebGL

Примечания

  1. ↑ HTML5 Differences from HTML 4. Working Draft. World Wide Web Consortium (5 Апреля 2011 года). Архивировано из первоисточника 7 июня 2012. Проверено 30 Апреля 2011 года.
  2. ↑ 1 2 HTML5 Differences from HTML4. World Wide Web Consortium (19 Октября 2010 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
  3. ↑ 1.9.2 Syntax Errors. HTML5 (16 Ноября 2010 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
  4. ↑ HTML 4 Errata. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
  5. ↑ Frequently Asked Questions (FAQ) About the Future of XHTML. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Декабря 2010 года.
  6. ↑ FOX News: No Flash on the iPhone? Apple’s Steve Jobs Finally Explains Why
  7. ↑ TIME: Steve Jobs: ‘Flash is No Longer Necessary’ and Other Musings
  8. ↑ CBS News: Steve Jobs: Why Apple Banned Flash
  9. ↑ FastCompany: Steve Jobs: Adobe’s Flash Is Old PC History, Open Web Is the Future
  10. ↑ «Thoughts on Flash», by Steve Jobs, CEO of Apple, Inc.
  11. ↑ Is HTML5 Replacing Flash?
  12. ↑ [whatwg] WHAT open mailing list announcement. lists.whatwg.org Mailing Lists. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
  13. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML (Editor’s Draft).. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 12 Апреля 2010 года.
  14. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML.. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 28 января 2009 года.
  15. ↑ When Will HTML5 Be Finished?. WHATWG. WHATWG Wiki. Архивировано из первоисточника 7 июня 2012. Проверено 10 Сентября 2009 года.
  16. ↑ HTML Working Group. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
  17. ↑ HTML5. World Wide Web Consortium (25 Августа 2009 года). Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
  18. ↑ [whatwg] HTML5 at Last Call (at the WHATWG). Lists.whatwg.org. Архивировано из первоисточника 7 июня 2012. Проверено 4 Марта 2010 года.
  19. ↑ Dive Into HTML5.(недоступная ссылка — история)
  20. ↑ 1 2 3 When Will HTML5 Be Finished?. FAQ. WHAT Working Group. Архивировано из первоисточника 7 июня 2012. Проверено 29 Ноября 2009 года.
  21. ↑ HTML5 Editor Ian Hickson Discusses Features, Pain Points, Adoption Rate, and More. Архивировано из первоисточника 7 июня 2012. Проверено 21 Июня 2010 года.
  22. ↑ Ян Хиксон WHATWG: Switching to an Unversioned Development Model. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
  23. ↑ Ян Хиксон HTML Is the New HTML5. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
  24. ↑ 1 2 W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard. World Wide Web Consortium (14 Февраля 2011 года). Архивировано из первоисточника 7 июня 2012. Проверено 18 Февраля 2011 года.
  25. ↑ Introduction to HTML5 video
  26. ↑ IBM Developer Works New elements in HTML5: Structure and semantics
  27. ↑ ICAMD.org Finalcut Silverlight Films that Videographers share Quicktime in a Flash : Video on the Web using HTML5 and other Codecs
  28. ↑ InstantShift [1] HTML5: Worth the Hype?
  29. ↑ «HTML5 Differences from HTML 4 — APIs». World Wide Web Consortium.
  30. ↑ «HTML Canvas 2D Context». World Wide Web Consortium.
  31. ↑ Доступное видео в HTML5 с субтитрами на JavaScript (13 Января 2010 года). Архивировано из первоисточника 7 июня 2012.
  32. ↑ «Web Storage Specification». World Wide Web Consortium.
  33. ↑ HTML Standard
  34. ↑ «Web SQL Database». World Wide Web Consortium.
  35. ↑ «Indexed Database». World Wide Web Consortium.
  36. ↑ «File API». World Wide Web Consortium.
  37. ↑ «Filesystem API». World Wide Web Consortium.
  38. ↑ «File API: Writer». World Wide Web Consortium.
  39. ↑ Anne, van Kesteren HTML5 differences from HTML 4 – W3C Working Draft 19 October 2010. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 2 Ноября 2010 года.
  40. ↑ Сергей Анатольевич Мавроди «Sergey’s HTML5 & CSS3 Quick Reference». Belisso Corp., 2010. ISBN 978-0-615-43321-9
  41. ↑ The XHTML syntax ― HTML5. Web Hypertext Application Technology Working Group. Архивировано из первоисточника 7 июня 2012. Проверено 1 Сентября 2009 года.
  42. ↑ Polyglot Markup: HTML-Compatible XHTML Documents, W3C Working Draft 05 April 2011
  43. ↑ FAQ – WHATWG Wiki. WHATWG. Архивировано из первоисточника 7 июня 2012. Проверено 2 декабря 2010.
  44. ↑ HTML5: The Markup Language Reference: Input Control. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 17 Февраля 2011 года.
  45. ↑ HTML5 Differences from HTML4. FAQ. World Wide Web Consortium (29 мая 2012 года). Архивировано из первоисточника 7 июня 2012. Проверено 12 июня 2012 года.
  46. ↑ 1 2 W3C HTML5 Logo FAQ. World Wide Web Consortium. — «Is this W3C’s «official» logo for HTML5? Yes, as of 1 April 2011.»  Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.
  47. ↑ 1 2 HTML5 Logo: Be Proud, But Don’t Muddy the Waters!. The Web Standards Project. Архивировано из первоисточника 7 июня 2012. Проверено 22 Января 2011 года.
  48. ↑ The HTML5 Logo Conversation. World Wide Web Consortium. Архивировано из первоисточника 7 июня 2012. Проверено 21 Января 2011 года.

Ссылки

  • HTML5 (including next generation additions still in development)  (англ.) — текущий черновик стандарта.
  • W3C HTML Working Group  (англ.)
  • W3C Editor’s draft  (англ.)
  • HTML5ROCKS — проект Google, посвящённый HTML5. См. также презентацию HTML5.
  • Примеры использования HTML5 от Apple  (англ.)
  • Тест браузеров на количество реализованных возможностей стандарта HTML5  (англ.)
  • HTML 5 differences from HTML 4  (англ.)
  • Справочник HTML5  (рус.)

Литература

  • Питер Лабберс, Брайан Олберс, Фрэнк Салим HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development.  — М.: «Вильямс», 2011. — С. 272. — ISBN 978-5-8459-1715-7
  • Стивен Хольцнер HTML5 за 10 минут, 5-е издание = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. — М.: «Вильямс», 2011. — ISBN 978-5-8459-1745-4

Какие форматы мне нужны для видео HTML5?

← Назад

BY Zencoder

ТЕГИ
  • Технология
  • Доставка видео
  • Управление видео
  • Потоковое видео

019 Тег

Подождите… зачем избегать Флэша?

Одна из лучших особенностей HTML5-видео заключается в том, что это означает, что (большинству) пользователей не нужно будет использовать Flash для воспроизведения. Вы можете спросить: «Что такого плохого во Flash? Кажется, еще вчера с его помощью создавались целые сайты!» Есть целая куча причин, но в конечном итоге все сводится к лучшему опыту для пользователя. Видео в формате HTML5 загружается быстрее, чем плагин Flash, и использует меньше системных ресурсов, кроме того, его намного проще использовать с точки зрения веб-разработчика. Мобильные устройства также имеют разрозненную поддержку Flash, но ни iOS, ни Android (начиная с версии 4.1) ее не поддерживают. При этом Flash по-прежнему играет важную роль в Интернете. Многие старые браузеры не поддерживают видео в формате HTML5, поэтому для их поддержки вам потребуется предоставить резервную копию Flash. Большинство видеоплееров HTML5 (например, Video.js) справятся с этим за вас. С этого момента мы будем работать, исходя из предположения, что мы пытаемся по возможности избегать загрузки резервного варианта Flash.0005

Какие форматы?

В современных браузерах изначально работают три видеоформата. К сожалению, ни один из них не работает во всех браузерах, поэтому вам понадобится комбинация как минимум двух для полноценной поддержки видео HTML5.

Минимум

Как минимум вам понадобится файл .mp4 с H.264 + AAC (или MP3). H.264 изначально поддерживается большинством браузеров и может воспроизводиться с использованием резервного флэш-памяти в браузерах, где его нет. H.264 High Profile обеспечивает высочайшее качество, но Baseline имеет наибольшую поддержку, особенно среди мобильных устройств (подробнее об этом позже).

Поддерживаемые настольные браузеры

  • Safari 3.1+
  • Chrome 3.0+
  • Internet Explorer 9.0+
  • Firefox 21, 24 (по умолчанию отключено в 24 900 7
    • , зависит от системного кодека) 2 Поддерживаемые мобильные браузеры

    • Android Browser 3.0+
    • Safari (iOS) 3.1+
    • Firefox (Android) 17.0+
    • Internet Explorer (Windows Phone) 9.0+

    Несколько собственных форматов для воспроизведения в любом количестве

    90 браузеров, вам необходимо также включить версию OGV (Ogg Theora + Vorbis) или WebM (VP8 + Vorbis). Вы можете включить оба для максимального охвата, но большинство браузеров, поддерживающих один, будут поддерживать и другой.

    Поддерживаемые настольные браузеры

    WebM

    • Chrome 6.0+
    • Firefox 4.0+
    • Opera 10.60+

      • 3 Ogg

      • Chrome 3.0+
      • Firefox 3.5+
      • Opera 10. 50+

      Поддерживаемые мобильные браузеры

      • (оба) Браузер Android 2.3+

      В 2010 году Ogg поддерживался в 44,64% браузеров, а WebM — только в 9,35%. В 2013 году поддержка между ними почти одинакова. По состоянию на декабрь 2012 года Ogg поддерживается в 58,85% браузеров, а WebM — в 58,03%. Если вы собираетесь выбирать между ними, мы предлагаем использовать WebM. Еще в 2010 году мы сказали, что считаем WebM будущим открытого видео, и мы до сих пор верим, что это так. WebM является лучшим кодеком и имеет большой импульс, поэтому мы думаем, что он будет только расти. Рекомендация : MP4 + WebM (или MP4 + WebM + Ogg для максимального охвата)

      Что насчет мобильных устройств?

      Как и в случае с настольным компьютером, нет единого профиля, который работал бы на всех мобильных устройствах. Большинство современных устройств поддерживают H.264, но, к сожалению, существует множество вариантов поддерживаемого профиля H.264. К счастью, вы можете охватить большинство современных мобильных устройств всего несколькими выходами. Основное различие между устройствами заключается в поддерживаемом разрешении и профиле H.264. Более высокие профили (Main и High) обеспечивают лучшее качество при определенном размере файла, но их сложнее декодировать, а это означает, что старые устройства не могут их поддерживать. Базовый уровень является самым простым, но поддерживается большинством устройств.

      1. Большинство современных мобильных устройств поддерживают MP4/H.264. Сюда входят все серии iOS (iPhone, iPod, iPad, Apple TV и т. д.), большинство устройств Android, Windows Phone 7, современные телефоны Blackberry и т. д. Примечание : вы можете использовать один и тот же файл как для современных мобильных устройств, так и web, поэтому, если вы хотите уменьшить количество версий, вы можете обойтись только одной. Если вы хотите поддерживать более старые мобильные устройства (в терминах iPhone, 3GS и старше), вам нужно придерживаться профиля Baseline. Новейшие устройства (такие как iPhone 4S и 5) поддерживают High, но несколько более старые поколения (такие как iPhone 4) поддерживают только до Main.
      2. Используйте 3GP/MPEG4 для более старых мобильных устройств. Большинство Blackberry и некоторые Android-устройства также поддерживают 3GP, а 3GP обычно воспроизводится даже на iPhone/iPod (поскольку iOS воспроизводит MP4/MPEG-4, а 3GP — это всего лишь подмножество MP4).
      3. Современные устройства Android (Android 2.3.3+) поддерживают WebM.

      Рекомендация: Минимум, MP4, 640×480 или 480×360 для самой широкой поддержки. Максимум четыре версии MP4 (480×360, 640×480, 720p + основной и 1080p + высокий профиль) плюс одна версия 3GP (320×240). В зависимости от вашей аудитории, вам, скорее всего, подойдет набор выходов где-то посередине, но смотрите наш предыдущий пост для конкретных настроек кодирования.

      Как насчет нескольких битрейтов?

      Предоставляя несколько копий большого видео с разными размерами и битрейтом, вы можете поддерживать пользователей с разной скоростью подключения к Интернету. Если видео, которое вы предоставляете, имеет HD (или близкое к нему), вы, вероятно, захотите предоставить несколько вариантов. Скажем, самая качественная версия видео, которую вы предоставляете, — 1280 x 720, вы также можете предоставить версию 640 x 480. Если максимальное качество — 1920 x 1080, вы можете увеличить количество воспроизведений, чтобы также обеспечить 640 x 480 и 1280 x 720. Имейте в виду, что элемент видео HTML5 ничего не знает о выборе того битрейта, который нужен вашему пользователю, поэтому вам нужно либо написать собственную логику, чтобы угадать, какое представление лучше, либо позволить пользователю выбирать. Как правило, мы предлагаем предоставить пользователю более низкокачественную версию, а затем позволить ему выбрать более качественную версию, если он захочет.

      TL;DR

      1. Минимум: MP4/H.264 + WebM. Воспроизведение MP4 используется в качестве резервного варианта Flash, когда это необходимо.
      2. Для мобильных устройств тот же MP4 выше (с использованием профиля Baseline) унесет вас далеко вперед. Используйте 2-3 воспроизведения с разными разрешениями и профилями, чтобы обеспечить более широкую совместимость устройств и качество видео.

      Рекомендации Ниже приведены некоторые рекомендуемые конфигурации. Zencoder поддерживает все эти форматы, и если вам интересно, как создать оптимальные выходные профили с помощью Zencoder, просто свяжитесь с нами. Если вы хотите увидеть примеры запросов API для HTML5 и конкретных устройств, ознакомьтесь с шаблонами в конструкторе запросов 9.0005

      1. Просто заставь это работать
        • HTML5, Flash, Mobile: MP4/H.264, базовый профиль, 640×480
        • HTML5: WebM
      2. Немного округлить
        • HTML5, Flash: MP4/H.264, Высокий профиль
        • HTML5: WebM
        • Мобильный телефон: MP4/H.264, Базовый профиль, 480×360 или 640×480
      3. Поддержка4 хорошо

        3

        • HTML5, Flash: MP4/H.264, Высокий профиль
        • HTML5: WebM
        • HTML5: Ogg
        • Мобильный: MP4/H.264, базовый профиль, 480×360, для старых мобильных устройств
        • Мобильный: MP4/H. 264, основной профиль, 1280×720, для старых устройств iOS (iPhone 4 и более старые iPad/Apple TV). Новейшие устройства (iPhone 5 и т. д.) могут поддерживать воспроизведение высокого профиля для настольных ПК.
        • Мобильный: 3GP/MPEG4, 320×240 и/или 177×144, для отличных от смартфонов*

      * Выход 3GP в настоящее время находится в стадии бета-тестирования в Zencoder. Свяжитесь с нами, чтобы попробовать.

      Как использовать форматы видео HTML5?

      До появления HTML 5 не существовало стандартного формата для демонстрации видео на веб-страницах. Видео HTML 5 дает вам свободу вводить элемент видео в ваш браузер. Он частично заменяет элементы объекта, делая его более интересным и захватывающим для зрителей. Это новая технология, которая была разработана с целью показа видео в Интернете без использования каких-либо плагинов. Раньше видео HTML5 воспроизводились только с помощью Flash Player.

      Краткий обзор видеоформата HTML 5

      Этот новый стандартный элемент видео был представлен Opera Software в феврале 2007 года. Компания представила специальный код, который можно использовать для встраивания видео на вашу веб-страницу, называемую WebM.

      Как использовать элемент видео HTML5?

      Вы можете использовать этот код для встраивания видео на свои веб-страницы

      Например:

       <управление видео>


Ваш браузер не поддерживает видео тег.

      Работа с форматом видео HTML5

      Атрибут «Управление» добавляет элементы управления видео, такие как пауза, воспроизведение, остановка, громкость и т. д. Поэтому рекомендуется использовать атрибуты высоты и ширина. Если вы не установите предел размеров по высоте и ширине, браузер не сможет определить размер видео. Это приведет к мерцанию страницы во время загрузки видео.

      Текст между тегами будет отображаться только в тех браузерах, которые не поддерживают элемент видео.

      Вы можете создавать ссылки на различные видеофайлы, используя несколько элементов . Браузер будет использовать первоначальные воспринимаемые форматы.

      Как внедрить автовоспроизведение в формате видео HTML5?

      Если вы хотите, чтобы браузер запускал видео автоматически, то можно ввести, например, атрибут автоматического воспроизведения;

       <автозапуск видео>


Ваш браузер не поддерживает видео тег.

      Поддерживаемые форматы видео

      В настоящее время элемент видео поддерживает три видеоформата: MP4, WebM и Ogg.

      В HTML5 нет спецификаций относительно того, какой тип видео должен поддерживаться различными браузерами. Пользовательские агенты имеют полную свободу использования любого типа видео, который они сочтут подходящим. Тем не менее, рабочая группа HTML5 сделала желательным, по крайней мере, один тип видео, который поддерживается всеми браузерами.

      No related posts.