Какие форматы аудио поддерживает браузер
Яндекс Браузер умеет открывать аудиофайлы с расширениями\n mp3 , wav , m4a , wma , ogg , x-m4a , mpeg .
Аудио на боковой панели
В Браузере можно одновременно просматривать сайт и слушать музыку, запущенную на другой вкладке. Чтобы не переключаться между вкладками, нажмите значок на боковой панели. В появившейся панели управления можно поставить трек на паузу или запустить заново, переключиться на предыдущий или следующий трек в плейлисте.
Примечание. Если значок не нужен, нажмите правой кнопкой мыши на боковую панель и снимите отметку с опции Управление музыкой .
Если вы запустили музыку на нескольких вкладках, на панели отображаются все треки, и вы можете легко переключаться между ними.
Если у вас играют несколько аудиодорожек и нет времени останавливать каждую, нажмите кнопку Заглушить все вкладки .
Проблемы со звуком
Проверьте, включен ли звук на вкладке Браузера. Откройте боковую панель и нажмите значок . Если звук выключен, то вы увидите на вкладке значок . Чтобы включить звук, нажмите этот значок.
Попробуйте найти расширение, блокирующее аудио:
На боковой панели Браузера нажмите значок и произнесите любую фразу. Если, когда вы говорите, в окне программы пульсирует значок , микрофон настроен верно.
Если значок не пульсирует, проверьте работу микрофона:
В открывшемся окне перейдите на вкладку Уровни . Оба параметра не должны быть одновременно установлены на минимум или максимум.
Перейдите на вкладку Дополнительно и убедитесь, что опция Включить дополнительные средства звука не активна.
Отключите использование специальных звуковых эффектов. Откройте вкладку Улучшения . Выберите опцию Отключение всех звуковых эффектов и нажмите Применить → Оk .
Подробные сведения о настройке микрофона см. в Справке Windows.
Какие аудиоформаты поддерживает Браузер?
Яндекс Браузер умеет открывать аудиофайлы с расширениями mp3 , wav , m4a , wma , ogg , x-m4a , mpeg .
Аудио на боковой панели
В Браузере можно одновременно просматривать сайт и слушать музыку, запущенную на другой вкладке. Чтобы не переключаться между вкладками, нажмите значок на боковой панели. В появившейся панели управления можно поставить трек на паузу или запустить заново, переключиться на предыдущий или следующий трек в плейлисте.
Примечание. Если значок не нужен, нажмите правой кнопкой мыши на боковую панель и снимите отметку с опции Управление музыкой .
Если вы запустили музыку на нескольких вкладках, на панели отображаются все треки, и вы можете легко переключаться между ними.
чтобы заглушить музыку, нажмите значок ;
чтобы включить музыку, нажмите значок .
Если у вас играют несколько аудиодорожек и нет времени останавливать каждую, нажмите кнопку Заглушить все вкладки .
Проблемы со звуком
Проверьте, включен ли звук на вкладке Браузера. Откройте боковую панель и нажмите значок . Если звук выключен, то вы увидите на вкладке значок . Чтобы включить звук, нажмите этот значок.
В правом нижнем углу экрана на панели задач нажмите правой кнопкой мыши значок .
В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.
Небольшие разработчики, такие как 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 следует использовать размер 640x480, а для BlackBerry — 480x360. Многие программы кодирования имеют предварительные настройки, с помощью которых можно создать видео, оптимизированное для мобильных устройств.
Множество форматов: как понравиться всем браузерам
Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда состоит в том, что ни один аудио- или видеоформат не будет работать на всех браузерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы должны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кроме этого, вам, скорее всего, нужно будет организовать резервное решение 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. Можно использовать видеопроигрыватель Flash (или аудиопроигрыватель Flash для аудио). К счастью, в Интернете существует масса видеопроигрывателей Flash, многие из которых бесплатные, по крайней мере, для некоммерческого использования. И большинство из них поддерживает формат H.264, который вы уже, наверное, используете для HTML5-видео.
В следующем листинге приведен пример использования в качестве резервной решения в элементе проигрывателя Flowplayer:
Если же требуется, наоборот, реализовать основное решение в виде Flash, а резервное — в виде HTML, нужно просто переставить строки из предыдущего примера. Начинаем с элемента :
Обычно этот подход следует применять только в том случае, если нужно расширить существующий веб-сайт на основе Flash для поддержки устройств Apple, таких как iPad. Кстати, существует по крайней мере один проигрыватель на JavaScript со встроенной возможностью резервного решения HTML5. Называется он JW Player.
Было время, когда Интернет использовался в основном для обмена данными научных исследований. Потом было время перемен, и в мгновение ока Интернет стал одним из двигателей новостной индустрии и торговли. Еще несколько мгновений, и вот мы уже здесь, с Интернетом, использующим новейшие сетевые технологии для доставки на дом по всему миру невероятнейших объемов видеоинформации самого разного содержимого от трансляций с марсохода в режиме реального времени до дешевой комедии.
Важность этого сдвига трудно переоценить. Проект, который в начале 2005 г. был на стадии "разве не было бы это замечательно", теперь реализовался в виде YouTube. Видеосюжеты продолжительностью в 3—4 минуты наводнили Интернет. И, как докладывает гигант сетевого оборудования и услуг Cisco, эта тенденция не замедляется, и, согласно оценкам этой компании, к 2014 г. ошеломляющие 90% всего интернет-трафика будет составлять видео.
Поразительно, это грандиозное изменение произошло несмотря на то, что HTML и браузеры не обладают встроенной поддержкой видео и даже аудио. Вместо этого они полагаются на подключаемые модули, такие как Flash, которые удовлетворяют надобности большинства пользователей в большинстве случаев. Но в этом HTML-видеопокрытии есть очевидные мертвые зоны, наподобие той, которую создал iPad компании Apple, не поддерживающий Flash.
Стандарт HTML5 пытается решить эти пробелы введением элементов и , которых так не хватало в HTML все эти годы. Наконец, содержимое мультимедиа получило единообразную, стандартную поддержку, не требующую подключаемых модулей. Но не все в этой истории так гладко. Основные разработчики браузеров сцепились в битве аудио- и видеоформатов, которая намного грязнее, чем война форматов Blu-Ray и HD-DVD.
Печальным последствием этой битвы является отсутствие единого аудио- и видеоформата, который бы работал на всех браузерах, и чтобы файлы мультимедиа можно было бы воспроизводить в HTML их нужно кодировать по-разному для разных браузеров.
Основные сведения о воспроизведении видео в современных программах
Не прибегая к HTML5, видео в веб-страницу можно добавить двумя способами. Самый простой состоит в использовании элемента . Потом браузер создаст видеоокно под проигрыватель Windows Media Player, Apple QuickTime или какой-либо другой проигрыватель и разместит его на странице.
Основная проблема с этим подходом заключается в том, что он полностью отдает разработчика на милость поддержки браузера. Разработчик не властен управлять воспроизведением, может не иметь возможности буферизировать видео, чтобы предотвратить задержки с воспроизведением, а также не знает, сможет ли данный видеофайл воспроизводиться в разных браузерах или операционных системах.
Второй подход заключается в использовании подключаемого модуля браузера, наподобие сравнительно недавнего новичка в этой области Silverlight корпорации Microsoft или старожила Flash от компании Adobe.
До недавнего времени использование модуля Flash полностью решало задачу поддержки видеосодержимого браузерами. Ведь видеоформат Flash работает всюду, где установлен модуль Flash, что в настоящее время составляет свыше 96% подключенных к Интернету компьютеров. Технология Flash также предоставляет почти неограниченный контроль над воспроизведением видео. Разработчик может, например, использовать готовый видеоплеер Flash сторонней фирмы или создать собственный и индивидуально оформить каждую кнопку управления.
Но подход с использованием Flash также не идеальный. Чтобы вставить видео Flash в веб-страницу, в нее нужно вставить определенный объем безобразной разметки, содержащей элементы и . Кроме этого, видеофайлы для показа нужно закодировать в требуемый формат, а также может потребоваться приобрести дорогостоящий инструментарий Flash-разработки и научиться пользоваться им, что может потребовать серьезных усилий. Но хуже всего, это новая волна мобильных устройств компании Apple — iPhone и iPad. Эти устройства органически не воспринимают Flash и выводят пустую рамку в том месте страницы, где вставлено это видео.
Модули расширения также имеют свойство временами сбоить. Причина кроется в принципе их работы. Например, при посещении страницы, на которой используется видео Flash, браузер позволяет модулю Flash взять под контроль прямоугольную область где-нибудь на странице. В большинстве случаев этот подход работает нормально, но незначительные ошибки или нестандартные системные настройки могут вызвать неожиданные помехи и сбои, такие как, например, искаженное видео или потребление веб-страницей огромных объемов памяти, в результате чего картинка начинает ползти, как улитка.
Тем не менее, если вы сегодня просматриваете видео в Интернете (но не с помощью iPhone или iPad), то, скорее всего, это видео обернуто в мини-приложение Flash. Если вы не уверены, щелкните на видеоплеере правой кнопкой мыши. Если откроется меню с командой наподобие "О программе Adobe Flash Player", тогда вы наверняка имеете дело с вездесущим модулем Flash.
Видео и аудио в HTML5
Поддержка видео и аудио HTML5 основана на простой идее. Точно так же, как с помощью элемента в веб-страницу можно вставлять изображения, в нее должно быть возможным вставить звук посредством элемента и видео с помощью элемента . Вполне логично, HTML5 позволяет вставлять оба эти типа мультимедиа.
К сожалению, некоторые аспекты воспроизведения мультимедиа находятся вне досягаемости новых аудио- и видеовозможностей HTML5. Для следующего содержимого и/или способов его воспроизведения нужно опять обращаться к Flash (по крайней мере, на данный момент):
Лицензированное содержимое . Видеофайлы HTML5 не используют никакой системы для защиты от копирования. По сути, народ может загружать HTML5-видео с такой же легкостью, как и изображения — просто щелкнув правой кнопкой мыши по видео и выбрав опцию Сохранить.
Потоковое аудио или видео . В HTML5 нет способа для передачи аудио или видео от одного компьютера к другому в потоковом режиме. Поэтому, разработчикам чат-программ, в которых посетители веб-страницы используют микрофон и/или веб-камеру, придется продолжать работать с Flash. Разработчики HTML5 экспериментируют с элементом , который может предоставить эту возможность, но в настоящее время решения с использованием только HTML5 нет ни для одного браузера.
Адаптивное потоковое видео . Для продвинутых веб-сайтов с большими объемами видеосодержимого, наподобие YouTube, требуется многоуровневое управление буферизацией и пересылкой видеопотока. Им нужно предоставлять видео в разных разрешениях, видеособытий реального времени, а также настраивать качество видео под пропускную возможность интернет-подключения пользователя. До тех пор пока HTML5 не сможет предоставлять эти возможности, видеообменные сайты могут добавить поддержку HTML5 только как опцию, но полностью переходить на него с Flash не будут.
Высококачественное аудио с низкой задержкой . Некоторые приложения требуют начинать воспроизведение аудио без задержки или проигрывать несколько аудиоклипов с идеальной синхронизацией. В качестве примеров таких приложений можно назвать виртуальный синтезатор, музыкальный визуализатор или игру реального времени с множеством накладывающихся звуковых эффектов. И в то время как разработчики браузеров усиленно работают над улучшением HTML5-аудиопроизводительности, оно еще не отвечает этим требованиям.
Динамическое создание или редактирование аудио . А если вам нужно не только воспроизводить записанное аудио, но также анализировать аудиоинформацию, модифицировать или создавать аудио — и все это в режиме реального времени? Новые стандарты, такие как Audio Data API, разрабатываемые под спонсорством Firefox, состязаются в добавлении возможностей этого типа к HTML5-аудио, но в настоящее время они еще не доступны.
Воспроизведение аудио с помощью элементаВ следующем коде приведен простейший пример использования элемента :
Атрибут src содержит имя аудиофайла для воспроизведения, а атрибут controls указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением. Своим внешним видом эти элементы управления слегка отличаются от браузера к браузеру, но все они имеют одинаковое назначение: разрешают пользователю начинать и останавливать воспроизведение, переходить в другое место записи и регулировать громкость:
Элементы и должны иметь как открывающий, так и закрывающий тег. Использование синтаксиса пустых элементов (например, ) не допускается.
Кроме атрибута controls элемент поддерживает еще три атрибута: preload, auotoplay и loop. Атрибут preload указывает браузеру способ загрузки аудиофайла. Значение auto этого атрибута указывает браузеру загружать аудиофайл полностью, чтобы он был доступен, когда пользователь нажмет кнопку воспроизведения. Конечно же, загрузка осуществляется в фоновом режиме, чтобы посетитель веб-страницы мог перемещаться по странице и просматривать ее, не дожидаясь завершения загрузки аудиофайла.
Атрибут preload может принимать еще два значения. Значение metadata указывает браузеру загрузить первую небольшую часть файла, достаточную, чтобы определить некоторые его основные характеристики (например, общий размер файла). Значение none указывает браузеру не загружать аудиофайл автоматически. Эти опции можно использовать для того, чтобы сэкономить пропускную способность подключения, например, если страница содержит большое число элементов , но ожидается, что пользователь будет проигрывать лишь некоторые из них:
Когда атрибуту preload задано значение none или metadata, загрузка аудиофайла начинается после того, как пользователь нажмет кнопку воспроизведения. К счастью, браузеры могут без проблем проигрывать одну часть аудиофайла в то время, как грузится другая, если только интернет-подключение не слишком медленное.
Если значение атрибута preload не установлено, то браузеры действуют по своему индивидуальному усмотрению. Большинство браузеров предполагает auto в качестве значения по умолчанию, но в Firefox это metadata. Кроме этого, важно помнить, что атрибут preload не является обязательным для выполнения правилом, а рекомендацией браузеру желаемого действия, которую он может игнорировать зависимости от других обстоятельств. А некоторые устаревшие браузеры вообще не обращают внимания на атрибут preload.
Если вставить в разметку несколько элементов , то браузер создаст отдельную полосу элементов управления воспроизведением для каждого из них. Посетитель веб-страницы может прослушивать аудио на одном из них или на всех сразу.
Атрибут autoplay указывает браузеру начать воспроизведение сразу же после завершения загрузки страницы:
Если этот атрибут не используется, пользователь должен нажать кнопку запуска, чтобы начать воспроизведение.
Элемент можно использовать для того, чтобы проигрывать фоновую музыку или обеспечить звуковые эффекты в игре с браузерным интерфейсом. Для этого из него нужно убрать атрибут controls и вставить атрибут autoplay (или же осуществлять воспроизведения посредством кода JavaScript). Но будьте осторожны в применении этого подхода и не забывайте, что для такой страницы все равно требуется какой-либо способ для прекращения воспроизведения.
Наконец, атрибут loop указывает браузеру повторять воспроизведение:
Воспроизведение в большинстве браузеров достаточно плавное, что позволяет создать с помощью этого метода непрерывную повторяющуюся звуковую дорожку. Секрет состоит в том, чтобы использовать повторяемое аудио, с одинаковым началом и окончанием.
Воспроизведения видео с помощью элементаС элементом хорошо идет в паре элемент . Он применяет такие же атрибуты src, controls, autoplay и loop. Пример использования этого элемента показан в следующем коде:
Как и в случае с элементом , атрибут controls указывает браузеру создать набор элементов управления воспроизведением. В большинстве браузеров эти элементы скрываются при щелчке где-нибудь в области страницы и отображаются опять при наведении курсора мыши на область видеоплеера:
Кроме общих с элементом атрибутов, элемент имеет три своих собственных атрибута: height, width и poster.
Атрибуты height и width устанавливают высоту и ширину окна воспроизведения в пикселах, соответственно. Следующий код показывает пример создания область воспроизведения размером 600x400 пикселов:
Размеры окна воспроизведения должны совпадать с размером видео, но лучше явно указать их, чтобы оформление страницы не искажалось до того, как видеофайл загрузится (или если видеофайл вовсе не загружается).
Наконец, атрибут poster позволяет указать изображение, которое можно использоваться вместо видео:
Браузеры показывают это изображение в трех ситуациях: когда первый кадр видео еще не загрузился, атрибуту preload присвоено значение none или указанный видеофайл отсутствует.
Хотя на данном этапе мы рассмотрели всё, относящееся к аудио- и видеоразметке, эти возможности можно значительно расширить с помощью кода JavaScript. Но прежде чем мы углубимся в изучение элементов и , нам нужно разобраться с проблемами поддержки аудио- и видеокодеков.
HTML: Теги иХотя веб-браузеры имеют встроенную поддержку изображений с самых первых дней, встраивание аудио или видео на веб-страницу всегда требовало дополнительных подключаемых модулей (отдельных программных компонентов), которые добавляют больше возможностей браузеру, но не являются его частью (например Flash, QuickTime, RealPlayer и другие).
Плагин также означает, что приложение, которое воспроизводит аудио и видео содержимое, не является частью браузера. Подключаемый модуль заблокирован в виртуальной среде со своей программой, изолированной от браузера и от другого содержимого страницы. Кроме того, подключаемые модули являются необязательными, так что нельзя быть уверенным, что посетители сайта имеют нужное программное обеспечение для просмотра содержимого.
Стандарт HTML5 вводит новые элементы и , которые позволяют веб-разработчикам встраивать звук и видео на веб-страницу, не требуя собственных плагинов. Конечно из этого следует, что сам браузер должен иметь возможность воспроизведения таких файлов, на данный момент только последние версии браузеров поддерживают эти элементы.
Медиа кодеки и форматы
Цифровые аудио и видео данные обрабатываются через кодек, формулу, которая преобразует и сжимает звук или видео в поток битов для передачи через Интернет (термин "кодек" представляет сокращенное сочетание двух слов "код" и "декодирование"). Когда данные доходят до конечного пользователя, то он должен иметь тот же кодек для декодирования закодированного сигнала и преобразования его обратно в звук или видео.
Некоторые медиа кодеки запатентованы, то есть они принадлежат только одной компании и не относятся к открытым стандартам, и, как правило, владельцы патентов обычно взимают лицензионные сборы за использование их алгоритмов. Разработчики браузеров, такие как Apple, Google и Microsoft, имеют большой капитал и готовы лицензировать запатентованные кодеки для своих браузеров. Другие производители браузеров, такие как Mozilla и Opera вместо этого выбирают открытые стандарты кодеков и не используют запатентованные их виды. Даже не смотря на то, что последние версии всех браузеров поддерживают встроенные медиа-файлы HTML5, они еще не пришли к соглашению какие кодеки лучше использовать.
После того как медиа данные закодированы, они должны быть инкапсулированы и упакованы для доставки в одном из нескольких форматов. Эти форматы являются контейнерами для медиа-файлов, которые передаются между сервером и клиентом. Для проигрывания встроенных медиа-файлов браузер должен сначала прочитать формат контейнера, а затем расшифровать закодированные данные внутри него. Так же, как браузеры поддерживают разные кодеки, они также поддерживают различные форматы контейнеров для встроенных медиа-файлов.
Встроенные медиа-файлы должны быть переданы с надлежащим типом контента для каждого формата, так и клиент, и сервер смогут распознать, как обрабатывать эти файлы. Веб-сервер обрабатывает медиа типы автоматически, по крайней мере, для наиболее распространенных форматов. Для некоторых новых форматов может понадобиться дополнительная настройка сервера, обычно это заключается в добавлении нового типа контента в файл конфигурации.
Однако он редко используется в такой простой форме. По умолчанию элемент не имеет элементов управления и поэтому полностью невидимый. Он будет располагаться в HTML-документе и может быть доступен в браузере или JavaScript, но простое внедрение аудио файла не принесет особой пользы. С помощью логического атрибута controls можно добавить к аудио-файлу его собственные элементы управления, которые будут отображаться на веб-странице в месте расположения элемента :
Эти элементы управления предоставляются браузером и могут визуально отличаться в зависимости от браузера, но предоставляемые функции остаются неизменными:
- кнопка play/pause
- полоса прокрутки
- отображение времени
- громкость
Аудио форматы и поддержка браузерами
В настоящее время, существует 3 поддерживаемых аудио формата для элемента : MP3, Wav, Ogg
Браузер | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9 или выше | да | нет | нет |
Firefox 4.0 или выше | нет | нет | да |
Google Chrome 6 или выше | да | да | да |
Apple Safari 5 или выше | да | да | нет |
Opera 10.6 или выше | нет | да | да |
Атрибут controls добавляет элементы управления, с помощью которых пользователь сможет взаимодействовать с плеером. Атрибут autoplay указывает браузеру, что видео должно начать воспроизведение сразу, как только страница будет загружена, если он не указан, то в плеере будет отображен первый кадр исходного видео. Но чаще всего он не несет никакой полезной информации о том, что будет представлено с помощью видео-контента. Вместо этого можно предоставить любое изображение, указав к нему путь в атрибуте poster:
Элемент также может содержать один или несколько элементов , которые будут указывать на файлы разных форматов:
Видео форматы и поддержка браузерами
В настоящее время, существует 3 поддерживаемых видео формата для элемента : MP4, WebM и Ogg.
Браузер | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer 9 или выше | да | нет | нет |
Firefox 4.0 или выше | нет | да | да |
Google Chrome 6 или выше | да | да | да |
Apple Safari 5 или выше | да | нет | нет |
Opera 10.6 или выше | нет | да | да |
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.
Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .
При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .
А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег
- none - если вы не хотите использовать буфер файлов;
- auto - если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).
Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:
Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
Читайте также: