HTML5 "VIDEO, AUDIO - нет плагинам, да embed"
На статью вдохновил freeman, задавший путанный вопрос и получивший едва ли удовлетворяющие его ответы. Надеюсь, прочтение этой статьи поможет ему разобраться с определенной частью его вопроса.
История
Начну с действительно краткой истории, поскольку статья не историческая. История добавление мультимедийного контента в HTML начинается в ранних 90-х, когда один из разработчиков первого графического браузера Mosaic, основатель Netscape, Марк Андриссен предложил необязательный элемент IMG. Элемент позволял включать изображения в гипертекст. Следующим шагом стал элемент EMBED. Он позволял включать в гипертекст мультимедийный контент, на первых порах это были midi-файлы. Постепенно варианты использования элемента расширялись, но EMBED долгое время не был включен в стандарт. В качестве приемника предполагался элемент OBJECT. По embed отпевали похоронные песни, где-то на alistapart даже была статья с говорящим названием «Bey, bye embed», этот элемент был почти причислен к атавизму, хотя все еще вынужденно использовался для браузеров не поддерживающих object. Началась война плагинов встраиваемых в браузеры- real player, windows media player и тд. Ближе к 2005 наметился победитель — Adobe Flash, во многом его успеху способствовал YouTube. Sel поратовал упомянуть, что до декабря 2005 технология Flash принадлежала компании Macromedia. В 2007 году компания Apple отказалась от поддержки технологии Flash по причине убогости (или убагости) оной. Важно акцентировать тот факт, что воспроизведение мультимедийных материалов требовало установки сторонних плагинов, поэтому говорить задача, которую перед собой поставил freeman, воспроизведении видео без установки сторонних (third-party) плагинов, до появления HTML5 нельзя.
У браузера Opera были несколько экспериментальных сборок использовавших элемент video с достаточно простым API. В 2007 году эта информация стала известна и была взята на вооружение рабочей группой, занимавшейся разработкой HTML5. Помимо элемента video в спецификацию вошел элемент audio для воспроизведения аудио-контента. И спустя много лет, испытав всю порцию критики и унижений EMBED был стандартизирован.
Контейнеры и кодеки
Для лучшего понимания ситуации с реализациями HTML5 надо прояснить важную техническую деталь: контейнеры и кодеки. Долгое время эти понятия были вотчиной гиков, но настал момент и нам вникнуть. С контейнерами (AVI, FLV, OGG, VOB и т.д.) интуитивно все понятно, судя по названию они выполняют роль оболочки, несут в себе некую важную информацию — аудио и видео потоки + дополнительные метаданные. Кодеки (H.264, Theora, VP8 и т.д.) отвечают за алгоритм сжатия потока данных, то бишь при одинаковом битрейте при помощи разных кодеков можно добиться разных объемов файлов.
На данный момент браузеры поддерживают разные кодеки.
Видеокодеки (H.264, Theora, VP8)
H.264 — IE9, Safari 4+, долгое время этот кодек поддерживался браузером Chrome, но в январе разработчики заявили о прекращении поддержки, microsoft вернули поддержку этого кодека в хроме при помощи отдельно устанавливаемого расширения.
Theora — Firefox 3.5+, Chrome3+, Opera 10+,
VP8 — IE9 ( при условии инсталлированного кодека), Firefox4+, Chrome 5+, Opera 10.7+
Аудиокодеки (AAC, MP3, Vorbis)
AAC — Safari 4+, Chrome 3+
MP3 — IE9, Safari 4+, Chrome 3+
Vorbis — Firefox 3+, Chrome 4+, Opera 10+
WebM
Хотелось бы особо отметить видеоформат WebM, детище компании Google. WebM файлы — файлы с разрешением webm, формат основан на видеокодеке VP8, аудиокодеке Ogg Vorbis и все это обернуто контейнером из подмножества Matroska. Видеоформат имеет уже сейчас приличную поддержку в браузерах и отличается достаточно высоким качеством.
* Mozilla Firefox 4 and later
* Opera 10.60 and later
* Google Chrome 6 and later
* Microsoft Internet Explorer 9 and later (requires WebM MF components)
Пока рано говорить, что за ним будущее, но претендент достаточно интересный.
Проверка поддержки формата средствами JavaScript:
var video = document.createElement('video');
var supported = (video.canPlayType('video/mp4') in {'probably':1,'maybe':1});
HTML5
<video>
То о чем так долго говорили большевики свершилось. Элемент предназначенный для включения видео контента. В упрощенном виде его использование будет выглядеть так:
<video src=«kurskme.ogv»><video/>
(спасибо за найденную описку ololo)
Проблема заключается в том, что этот упрощенный вариант бесполезен. Как я уже писал выше разные браузеры поддерживают разные кодеки. И единственный вариант справится с этим — использовать разные файлы источники. Аттрибут src тут не поможет. На придется включить внутрь несколько элементов source.
<video>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
</video>
Браузеры перебирают список источников и выбирает поддерживаемый ими формат. Однако, что делать с браузерами, которые не поддерживают элемент video. Внутрь элемента можно включить альтернативный контент, который отобразится в случае, если браузер не поддерживает элемент video.
<video>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
<p> Козёл, скачай нормальный браузер.</p>
</video>
В данном случае мы включили текстовое сообщение, но напоминаю, что embed окончательно легализован в рамках html5, так что мы могли бы вставить старого друга — флэшовый плэйер.
Опасносте:
1. Некоторые авторы упоминают, что iPad содержит баг, он считывает только первый элемент>source<, поэтому версию mp4 лучше было бы поставить первой. Однако сам не тестил, масштабы бага на теле iPad не знаю, за что купил за то и продаю.
2. Браузер может иметь какую-то поддержку<video>, но не иметь поддержки выбранных вами форматов. Удивительный факт, опять же упомянутый уважаемыми людьми, но лично не наблюдавшийся.
Управление видео
Если мы хотим дать пользователю возможность управления элементом видео — необходимо добавить атрибут controls
<video controls>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
<p> Козёл, скачай нормальный браузер.</p>
</video>
Разумеется, как и в случае с другими элементами у разных браузеров могут быть свои особенности реализации. Например, при отключенном javascript элементы управления не будут отображаться :(
Другой полезный атрибут — poster. Он позволяет определить изображение, которое будет использовать браузер, пока загружается видео.
<video controls poster=«kurskme.jpg»>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
<p> Козёл, скачай нормальный браузер.</p>
</video>
Если вы опускаете этот атрибут — браузер отобразит первый кадр фильма.
Из комментария, который я оставил ниже в посте, можно получить представление об api элемента, которое позволяет нам создавать кастомную панель управления. Но тема немного выходит за рамки поста, поэтому, чтобы статья не висела неделю в статусе «не закончена», я не буду рассматривать здесь пример кастомизации управления.
Так же хочу упомянуть элемент track.
Данный дочерний элемент, который позволяет добавлять субтитры, названия частей и др. метаданные. Информация хранится в формате WebSRT.
Вероятно track я тоже подробно рассмотрю в другом посте.
Помимо необходимости обеспечивать разные браузеры разными версиями файла есть еще один минус. В HTML5 пока не определен механизм стриминга, трансляции или просмотр больших видеофайлов пока невозможен. Хотя W3C работает над этим. В теории стриминга еще нет, но некоторые браузеры уже его реализовали, из таких наработок пожалуй представляет интерес HTTP live streaming в Safari.
<audio>
Мой рассказ по audio будет бессовестно бедным, поскольку все, что важно, я уже рассказал про video. Пожалуй просто повторюсь, что версия файла зависит от браузера, что размещать их можно в дочерних элементах source, атрибут controls включает панель управления, элемент поддерживает простое js API. Для совместимости с браузерам не поддерживающими данный элемент можно добавить альтернативное содержание.
<audio controls=«controls»>
<source src=«kurskme.ogg» type=«audio/ogg»>
<source src=«kurskme.mp3» type=«audio/mp3»>
<a href=«kurskme.ogg»>Скачай себе на мобилу.</a>
</audio>
Из интересного и вкусного хотелось бы упомянуть Audio Data API, которое представляет замечательную возможность работы с аудио данными, в частности интересным является использование его для визуализации аудиоданных средствами элемента canvas.
P.S. Будем считать, что статья в состоянии бета-версии. Я еще буду ее немного пополнять.
продолжу позже…
История
Начну с действительно краткой истории, поскольку статья не историческая. История добавление мультимедийного контента в HTML начинается в ранних 90-х, когда один из разработчиков первого графического браузера Mosaic, основатель Netscape, Марк Андриссен предложил необязательный элемент IMG. Элемент позволял включать изображения в гипертекст. Следующим шагом стал элемент EMBED. Он позволял включать в гипертекст мультимедийный контент, на первых порах это были midi-файлы. Постепенно варианты использования элемента расширялись, но EMBED долгое время не был включен в стандарт. В качестве приемника предполагался элемент OBJECT. По embed отпевали похоронные песни, где-то на alistapart даже была статья с говорящим названием «Bey, bye embed», этот элемент был почти причислен к атавизму, хотя все еще вынужденно использовался для браузеров не поддерживающих object. Началась война плагинов встраиваемых в браузеры- real player, windows media player и тд. Ближе к 2005 наметился победитель — Adobe Flash, во многом его успеху способствовал YouTube. Sel поратовал упомянуть, что до декабря 2005 технология Flash принадлежала компании Macromedia. В 2007 году компания Apple отказалась от поддержки технологии Flash по причине убогости (или убагости) оной. Важно акцентировать тот факт, что воспроизведение мультимедийных материалов требовало установки сторонних плагинов, поэтому говорить задача, которую перед собой поставил freeman, воспроизведении видео без установки сторонних (third-party) плагинов, до появления HTML5 нельзя.
У браузера Opera были несколько экспериментальных сборок использовавших элемент video с достаточно простым API. В 2007 году эта информация стала известна и была взята на вооружение рабочей группой, занимавшейся разработкой HTML5. Помимо элемента video в спецификацию вошел элемент audio для воспроизведения аудио-контента. И спустя много лет, испытав всю порцию критики и унижений EMBED был стандартизирован.
Контейнеры и кодеки
Для лучшего понимания ситуации с реализациями HTML5 надо прояснить важную техническую деталь: контейнеры и кодеки. Долгое время эти понятия были вотчиной гиков, но настал момент и нам вникнуть. С контейнерами (AVI, FLV, OGG, VOB и т.д.) интуитивно все понятно, судя по названию они выполняют роль оболочки, несут в себе некую важную информацию — аудио и видео потоки + дополнительные метаданные. Кодеки (H.264, Theora, VP8 и т.д.) отвечают за алгоритм сжатия потока данных, то бишь при одинаковом битрейте при помощи разных кодеков можно добиться разных объемов файлов.
На данный момент браузеры поддерживают разные кодеки.
Видеокодеки (H.264, Theora, VP8)
H.264 — IE9, Safari 4+, долгое время этот кодек поддерживался браузером Chrome, но в январе разработчики заявили о прекращении поддержки, microsoft вернули поддержку этого кодека в хроме при помощи отдельно устанавливаемого расширения.
Theora — Firefox 3.5+, Chrome3+, Opera 10+,
VP8 — IE9 ( при условии инсталлированного кодека), Firefox4+, Chrome 5+, Opera 10.7+
Аудиокодеки (AAC, MP3, Vorbis)
AAC — Safari 4+, Chrome 3+
MP3 — IE9, Safari 4+, Chrome 3+
Vorbis — Firefox 3+, Chrome 4+, Opera 10+
WebM
Хотелось бы особо отметить видеоформат WebM, детище компании Google. WebM файлы — файлы с разрешением webm, формат основан на видеокодеке VP8, аудиокодеке Ogg Vorbis и все это обернуто контейнером из подмножества Matroska. Видеоформат имеет уже сейчас приличную поддержку в браузерах и отличается достаточно высоким качеством.
* Mozilla Firefox 4 and later
* Opera 10.60 and later
* Google Chrome 6 and later
* Microsoft Internet Explorer 9 and later (requires WebM MF components)
Пока рано говорить, что за ним будущее, но претендент достаточно интересный.
Проверка поддержки формата средствами JavaScript:
var video = document.createElement('video');
var supported = (video.canPlayType('video/mp4') in {'probably':1,'maybe':1});
HTML5
<video>
То о чем так долго говорили большевики свершилось. Элемент предназначенный для включения видео контента. В упрощенном виде его использование будет выглядеть так:
<video src=«kurskme.ogv»><video/>
(спасибо за найденную описку ololo)
Проблема заключается в том, что этот упрощенный вариант бесполезен. Как я уже писал выше разные браузеры поддерживают разные кодеки. И единственный вариант справится с этим — использовать разные файлы источники. Аттрибут src тут не поможет. На придется включить внутрь несколько элементов source.
<video>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
</video>
Браузеры перебирают список источников и выбирает поддерживаемый ими формат. Однако, что делать с браузерами, которые не поддерживают элемент video. Внутрь элемента можно включить альтернативный контент, который отобразится в случае, если браузер не поддерживает элемент video.
<video>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
<p> Козёл, скачай нормальный браузер.</p>
</video>
В данном случае мы включили текстовое сообщение, но напоминаю, что embed окончательно легализован в рамках html5, так что мы могли бы вставить старого друга — флэшовый плэйер.
Опасносте:
1. Некоторые авторы упоминают, что iPad содержит баг, он считывает только первый элемент>source<, поэтому версию mp4 лучше было бы поставить первой. Однако сам не тестил, масштабы бага на теле iPad не знаю, за что купил за то и продаю.
2. Браузер может иметь какую-то поддержку<video>, но не иметь поддержки выбранных вами форматов. Удивительный факт, опять же упомянутый уважаемыми людьми, но лично не наблюдавшийся.
Управление видео
Если мы хотим дать пользователю возможность управления элементом видео — необходимо добавить атрибут controls
<video controls>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
<p> Козёл, скачай нормальный браузер.</p>
</video>
Разумеется, как и в случае с другими элементами у разных браузеров могут быть свои особенности реализации. Например, при отключенном javascript элементы управления не будут отображаться :(
Другой полезный атрибут — poster. Он позволяет определить изображение, которое будет использовать браузер, пока загружается видео.
<video controls poster=«kurskme.jpg»>
<source src=«kurskme.ogv» type='video/ogg; codecs=«theora,vorbis»'>
<source src=«kurskme.mp4» type='video/mp4; codecs=«avcl.42E01E,mp4a.40.2»'>
<p> Козёл, скачай нормальный браузер.</p>
</video>
Если вы опускаете этот атрибут — браузер отобразит первый кадр фильма.
Из комментария, который я оставил ниже в посте, можно получить представление об api элемента, которое позволяет нам создавать кастомную панель управления. Но тема немного выходит за рамки поста, поэтому, чтобы статья не висела неделю в статусе «не закончена», я не буду рассматривать здесь пример кастомизации управления.
Так же хочу упомянуть элемент track.
Данный дочерний элемент, который позволяет добавлять субтитры, названия частей и др. метаданные. Информация хранится в формате WebSRT.
Вероятно track я тоже подробно рассмотрю в другом посте.
Помимо необходимости обеспечивать разные браузеры разными версиями файла есть еще один минус. В HTML5 пока не определен механизм стриминга, трансляции или просмотр больших видеофайлов пока невозможен. Хотя W3C работает над этим. В теории стриминга еще нет, но некоторые браузеры уже его реализовали, из таких наработок пожалуй представляет интерес HTTP live streaming в Safari.
<audio>
Мой рассказ по audio будет бессовестно бедным, поскольку все, что важно, я уже рассказал про video. Пожалуй просто повторюсь, что версия файла зависит от браузера, что размещать их можно в дочерних элементах source, атрибут controls включает панель управления, элемент поддерживает простое js API. Для совместимости с браузерам не поддерживающими данный элемент можно добавить альтернативное содержание.
<audio controls=«controls»>
<source src=«kurskme.ogg» type=«audio/ogg»>
<source src=«kurskme.mp3» type=«audio/mp3»>
<a href=«kurskme.ogg»>Скачай себе на мобилу.</a>
</audio>
Из интересного и вкусного хотелось бы упомянуть Audio Data API, которое представляет замечательную возможность работы с аудио данными, в частности интересным является использование его для визуализации аудиоданных средствами элемента canvas.
P.S. Будем считать, что статья в состоянии бета-версии. Я еще буду ее немного пополнять.
продолжу позже…
6 комментариев
В HTML5 не применяется XTML-синтаксис
Можно здесь поподробнее?
Именно так, Володь, но поскольку пост не посвящена истории HTML5 или Общим вопросам HTML5, то я не стал вдаваться в детали, это безусловно интересно, но для этого нужен другой пост, кстати, почему тебе не написать. Я же как и обещал дал краткую историю, упомянул только те факты, которые счел нужными в данной теме. А если тебя смутило, что группа разработчиков (среди которых без сомнения превалировали опера), не знали об экспериментальных сборках с новым элементом, тот тут как раз странного мало. Это нормальная ситуация для девелоперских контор. Сообщил им об этом оперский девелопер Анне Ван Керстон
In 2007, Anne van Kesteren wrote to the Working Group: «Opera has some internal experimental builds with an implementation of a<video> element. The element exposes a simple API (for the moment) much like the Audio() object: play(), pause(), stop(). The idea is that it works like<object> except that it has special lt;video> semantics much like<img> has image semantics.»
Ты одновременно и прав и не прав.
Прав: Что касается элемента video, то тут действительно мой ляп, пересуетился, статью пишу урывками, то что написано, делалось в три захода. И к третьему заходе стал переживать, что время потрачено на части про историю и кодеки, а к самому коду так и не перешел. Вот в спешке автомате и ляпнул, спасибо за поправку.
Прав: В HTML5 не применяется XTML-синтаксис
Не прав: большая часть кода написанного в xhtml абсолютно совместима с html5. Связано это с чертой html5, которая одновременно и изюминой и проклятьем — он сверхтерпим к разному стилю кодирования. Вы можете писать верхнем регистре, можете в нижнем, можете кавычить атрибуты, можете не кавычить, можете ставить слэш как у пустого элемента в xhtml, можете не ставить (при условии, что игнорирование этого слыша даст тот же результат, именно так, слэш будет проигнорирован юзер-агентом, кстати, это касается не только html5). Терпимость html5 иногда доходит до страшного, как вы считаете, этот код валиден:
<!doctype html>
<meta charset=utf-8 />
<TITLE>TEST</TITLE>
<P>Test this, m…fucker!</P>
Можете убедиться, он 100% валиден. И в этой кутерьме вседозволенности единственный спасательный круг — договоренность и стандарты кода внутри компании разработчиков. Да, я использую нижний регистр, да, кавычу все атрибуты, да оставляю закрываю слэш как в xhtml, при этом я получаю валидный html5 и код, который я в любой момент могу переделать в xhtml strict, если будет необходимость. В то же время мои проекты на xhtml опять же вполне дружественны к их переделке в html5, поскольку это соответсвует стандартам, который я установил для своей компании. Я такой не единственный- Remy Sharp, разработчик, соавтор книги по HTML5, куратор сайта //html5doctor.com/ тоже придерживается этого стандарта, в чем не трудно убедиться, посмотрев сайт его компании //leftlogic.com/. Думаю ли я отказываться от этой «обратной совместимости» в стандарте кодирования. Точно не сделаю это до официального спуска HTML5 на воду (официально он еще в разработке) и не раньше чем разработчики, с которыми я сотрудничаю в проектах, освоят html5 чтоб использовать его без моих подсказок.
Ставишь в тупик. Думаю, что есть люди чуть лучше меня знающие тему, да и пост все же не про это и опять же лучше было бы это в отдельном посте тогда уж обсуждать, но раз мужики не знают:
статья с хронологией этой войны и видео с джобсом
Официальное письмо Джобса написанное в 2010 году, где он поясняет по каким причинам уже три году на тот момент iPod, iPhone и iPad не имеют поддержки Flash
Основная цель письма:
До сих пор это касалось только iDevices, но, выходит Mac OS Lion, что мы видим? BИз приложений исчезли ряд устаревших программ и… Adobe Flash + JRE. Они устанавливаются в ручном режиме, насколько я это понимаю, на свой страх и риск, apple support умывает руки.
Ну вот таково мое понимание ситуации. Если есть люди, которые больше меня в теме (ибо я не маковод), буду рад уточнениям.
P.S. И опять, думал — приеду, допишу статью, вместо этого отвел на твои вопросы и уже надо спать, завтра куча работы.
Я увидел, что там есть флэш, а JRE пришлось ставить самому
Что касается смешанного синтаксиса, то это личное дело каждого. Спецификация рекомендует делать иначе, но на то она и рекомендация. Если существует риск, что по каким-то причинам придётся сменить доктайп, это единственно разумный выход и ты однозначно прав, потому что слепое поклонение спецификациям не стоит удорожания проекта и трат в виде лишних часов разработчика. Правда, я не смог себе представить, в какой ситуации это может потребоваться. Среднему проекту это точно не грозит.