Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла :

И всё готово! Можете посмотреть и работу примера .

Как установить фоновую музыку в html Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ - это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width - ширина панели в пикселях (или процентах)
height - высота панели в пикселях (или процентах)
align - расположение панели относительно текста, возможные значения left, right, center
hidden - позволяет скрыть панель, значения аттрибута: true - панель скрыта, false - панель видима (значение по умолчанию)
autostart - значение true - проигрыватель стартует автоматически при загрузке страницы, false - ждет нажатия на кнопку воспроизведение
loop - цикл, true - трэк проигрываться по кругу, а при значении false - только один раз

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :

src - путь к Вашему аудиофайлу
loop - сколько раз мелодию повторить (если -1, то повторяется бесконечно)
balance - значение стереобаланса (от -10000 до 10000)
volume - громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель - при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 - тег audio
audio - парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

Атрибуты тега audio

autoplay - файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls - отобразить панель управления плеера в браузере
loop - проигрывает файл заново после его окончания
preload - загрузка аудио файла произойдёт вместе с загрузкой страницы
src - путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Тег audio

Аудио в HTML 5

Тег audio не поддерживается вашим браузером.
Скачайте музыку.

Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла :

И всё готово! Можете посмотреть и работу примера .

Как установить фоновую музыку в html Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ - это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width - ширина панели в пикселях (или процентах)
height - высота панели в пикселях (или процентах)
align - расположение панели относительно текста, возможные значения left, right, center
hidden - позволяет скрыть панель, значения аттрибута: true - панель скрыта, false - панель видима (значение по умолчанию)
autostart - значение true - проигрыватель стартует автоматически при загрузке страницы, false - ждет нажатия на кнопку воспроизведение
loop - цикл, true - трэк проигрываться по кругу, а при значении false - только один раз

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :

src - путь к Вашему аудиофайлу
loop - сколько раз мелодию повторить (если -1, то повторяется бесконечно)
balance - значение стереобаланса (от -10000 до 10000)
volume - громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель - при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 - тег audio
audio - парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

Атрибуты тега audio

autoplay - файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls - отобразить панель управления плеера в браузере
loop - проигрывает файл заново после его окончания
preload - загрузка аудио файла произойдёт вместе с загрузкой страницы
src - путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Тег audio

Аудио в HTML 5

Тег audio не поддерживается вашим браузером.
Скачайте музыку.

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

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

Как добавить HTML5-аудио на веб-страницу 1. Элемент Поддержка браузерами

IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

HTML5-элемент используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.

Рис. 1. Внешний вид аудио плеера в разных браузерах

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

Скачать name.mp3

Таблица 1. Атрибуты тега Атрибут

autoplay	Автоматическое воспроизведение аудио файла сразу же после загрузки страницы.
controls	Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (начинать и останавливать воспроизведение, переходить в другое место записи, регулировать громкость).
loop	Циклическое воспроизведение аудио файла.
muted	Выключает звук при воспроизведении аудио файла.
preload	Атрибут, отвечающий за предварительную загрузку аудио контента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть аудио файла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки аудио файла.
src	Содержит абсолютный или относительный URL-адрес аудио файла.

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

3. Альтернативные медиа-ресурсы

Элемент используется для добавления нескольких медиа-ресурсов для и . Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

4. Добавление субтитров и заголовков

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

Таблица 3. Атрибуты тега Атрибут Описание, принимаемое значение

default	Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент может содержать данный атрибут.
kind	Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label	Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src	Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.
srclang	Язык воспроизводимой дорожки.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

Когда впервые были введены HTML5-теги audio и video, несовместимости с кодеками и браузерами сделали их трудными в использовании, и развертывать их на крупных веб-сайтах было непрактично. Эти теги были хороши для компаний, которые пишут экспериментальный код или ведут кросс-браузерные медиа-разработки, но для универсального использования HTML5 Media API был слишком ненадежен.

Сегодня многое изменилось. Браузеры и библиотеки JavaScript вышли на такой уровень, когда вы можете (и должны) использовать HTML5 Media как вариант по умолчанию для любых проектов, где будет показываться аудио- и видеоконтент. Даже перенастройка существующего видеоконтента Flash и Silverlight для воспроизведения в HTML5 стала делом сравнительно простым. В этой статье мы рассмотрим преимущества использования HTML5 для воспроизведения медийной информации, изучим некоторые примеры кода, обсудим ряд основных проблем, с которыми сталкиваются разработчики, и поговорим о способах решения этих проблем.

Преимущества HTML5 Media

Преимущество использования HTML5 для воспроизведения медийной информации заключается в том, что вы можете использовать свои навыки в работе с HTML, CSS и JavaScript вместо изучения Flash или Silverlight. Если вы умеете создавать кнопки в HTML и управлять ими с помощью JavaScript, значит, вы знаете все, что нужно для разработки под HTML5 Media. В HTML5 Media встроена поддержка надписей и субтитров с применением нового элемента track; также рассматриваются дополнительные функции, например поддержка прямого побайтового доступа для манипуляций с видео.

Более того, воспроизведение медийной информации через HTML5-теги video и audio осуществляется эффективнее, чем через такие плагины, как Flash или Silverlight, что дает более плавное проигрывание и продлевает время работы от аккумуляторов. В дополнение к этому мобильные устройства под управлением Windows Phone 7.5, Apple iOS и Android (а также браузер в стиле Metro в Windows 8) поддерживают воспроизведение медийной информации только через HTML5-теги video и audio. Некоторые устройства Android включают Flash, но Adobe недавно отказалась от дальнейшей работы над своей мобильной версией Flash, а значит, в будущем HTML5 станет единственным способом воспроизведения медийной информации на мобильных устройствах.

Простое воспроизведение в HTML5 и атрибут controls

Во времена использования Flash или Silverlight для воспроизведения видео простейшая разметка, позволяющая выполнять эту задачу (в данном случае - проигрывать видео в формате mp4), выглядела бы примерно так:

Сравните эти вложенные теги object, param и embed со следующим HTML5-тегом video, используемым для воспроизведения того же видео в кодировке h.264:

Этот вариант гораздо проще - только чистый HTML, который практически не нуждается в пояснениях. Когда браузер скачивает достаточный объем видеоролика, чтобы определить исходную высоту и ширину кадров, он соответствующим образом изменяет размеры видео. Но, как и в случае с тегами img, всегда лучше указывать атрибуты height и width, чтобы не возникало необходимости в перезагрузке страницы. Кроме того, вы можете использовать атрибут style, чтобы указать px или значения ширины и высоты в процентах (в последующих примерах я буду использовать оба варианта).

Один из добавленных мной атрибутов - controls. Он сообщает браузеру отображать свою встроенную панель управления воспроизведением, которая обычно включает переключатель старт/пауза, индикатор прогресса и элементы управления громкостью. Controls - это булев атрибут, т. е. ему не нужно присваивать значение. В синтаксисе, более близком к XHTML, вы могли бы написать controls="controls", но браузер всегда считает controls равным false, если он отсутствует, и true, если он присутствует или если ему присвоено какое-то значение.

Медиа-атрибуты HTML5 и дочерние теги source

Для элементов audio и video введено несколько новых атрибутов, определяющих то, как браузер будет представлять медиаконтент конечному пользователю:

• src указывает один медийный файл для проигрывания (о нескольких источниках с разными кодеками, пожалуйста, см. ниже);
• poster - URL изображения, которое будет показываться до нажатия пользователем кнопки Play (только для video);
• preload определяет, как и когда браузер загрузит медийный файл. Возможны три значения: none (видео не скачивается, пока пользователь не запускает проигрывание), metadata (сообщает браузеру скачивать ровно столько данных, чтобы можно было определить высоту и ширину кадров, а также длительность медиа-ролика) и auto (позволяет браузеру самому решать, какой объем видео нужно скачивать до запуска проигрывания пользователем);
• autoplay - булев атрибут, используемый для запуска видеоролика сразу после загрузки страницы (мобильные устройства часто игнорируют этот атрибут для экономии пропускной полосы);
• loop - булев атрибут, вызывающий повторное воспроизведение видео по достижении конца записи;
• muted - булев атрибут, указывающий, нужно ли запускать видео с выключенным звуком;
• controls - булев атрибут, указывающий, должен ли браузер выводит свои элементы управления;
• width и height задают воспроизведение видеоролика с определенным размером (только для video, значения не могут быть в процентах).

Отображение текстовых элементов в течение определенного времени

В браузерах также начинают реализовывать элемент track, который поддерживает в видеороликах субтитры, скрытые титры (closed captions), переводы (translations) и комментарии. Вот элемент video с дочерним элементом track::

В этом примере я задействовал четыре из пяти возможных атрибутов элемента track:

• src - ссылка на файл либо в формате Web Video Timed Text (WebVTT), либо в формате Timed Text Markup Language (TTML);
• srclang - язык TTML-файла (например, en, es или ar);
• kind указывает тип текстового контента: субтитры, заголовки, описания, главы или метаданные;
• label хранит текст, отображаемый пользователю, который выбирает трек;
• default - булев атрибут, определяющий стартовый элемент track.

WebVTT - это простой текстовый формат, который начинается с однострочного объявления (WEBVTT FILE), а затем перечисляет время начала и конца; в качестве разделителя используются символы -->, а за временем начала и конца указывается текст, отображаемый в этот интервал времени. Вот простой WebVTT-файл, который отображает две строки текста в два разных интервала времени:

WEBVTT FILE 00:00:02.5 --> 00:00:05.1 This is the first line of text to display. 00:00:09.1 --> 00:00:12.7 This line will appear later in the video.

На момент написания этой статьи элемент track поддерживался только в Internet Explorer 10 Platform Preview и Chrome 19, а в остальных браузерах эта поддержка должна появиться очень скоро. Некоторые библиотеки JavaScript, о которых я расскажу позже, добавляют поддержку элемента track в браузеры, пока не имеющие соответствующей реализации, но есть еще и отдельная библиотека поддержки track - captionator.js (captionatorjs.com), которая разбирает теги track, читает файлы форматов WebVTT и TTML (а также SRT и YouTube SBV) и предоставляет UI для браузеров, где пока нет собственной поддержки.

Скриптовое управление HTML5 Media

Ранее я использовал атрибут controls, чтобы браузер выводил свои элементы управления поверх тегов video или audio. Проблема в том, что у каждого браузера свой набор элементов управления, которые вряд ли совпадут с дизайном вашего веб-сайта. Для большей согласованности вы можете удалить элементы управления браузера, а затем добавить на страницу собственные кнопки, управляемые кодом на JavaScript. Вы также можете добавить слушатели событий (event listeners), чтобы отслеживать состояние процесса воспроизведения видео или аудио. В следующем примере я убрал атрибут controls и добавил разметку ниже video, которая используется в качестве базовой панели элементов управления:

00:00 00:00

Простой код на JavaScript (рис. 1 ) будет управлять воспроизведением видео и показывать текущее время в видеоролике, а также создаст полноценный плеер, показанный на рис. 2 (Internet Explorer 9). (Заметьте, что в HTML5 в теге script атрибут type="text/javascript" не обязателен.)

Рис. 1. Управление воспроизведением видео

// Обертываем код в функцию для защиты пространства имен (function() { // Find the DOM objects var video = document.getElementById("video1"), playBtn = document.getElementById("video1-play"), muteBtn = document.getElementById("video1-mute"), current = document.getElementById("video1-current"), duration = document.getElementById("video1-duration"); // Переключаем состояние "старт/пауза" playBtn.addEventListener("click", function() { if (video.paused || video.ended) { video.play(); playBtn.value = "Pause"; } else { video.pause(); playBtn.value = "Play"; } }, false); // Переключаем состояние "звук включен/выключен" muteBtn.addEventListener("click", function() { if (video.muted) { video.muted = false; muteBtn.value = "Mute"; } else { video.muted = true; muteBtn.value = "Unmute"; } }, false); // Показываем длительность, когда это становится возможным video.addEventListener("loadedmetadata", function() { duration.innerHTML = formatTime(video.duration); }, false); // Обновляем текущее время video.addEventListener("timeupdate", function() { current.innerHTML = formatTime(video.currentTime); }, false); function formatTime(time) { var minutes = Math.floor(time / 60) % 60, seconds = Math.floor(time % 60); return (minutes < 10 ? "0" + minutes: minutes) + ":" + (seconds < 10 ? "0" + seconds: seconds); } })();

Код на рис. 1 вводит методы play и pause, события timeupdate и loadedmetadata, а также свойства paused, ended, currentTime и duration. Полный HTML5 Media API (w3.org/TR/html5/video.html) включает гораздо больше средств, чем нужно для создания полнофункционального медиаплеера. Помимо атрибутов медийных тегов, перечисленных ранее, медиа-объекты HTML5 имеют другие свойства, доступные только через JavaScript:

• currentSrc описывает медийный файл, который в данный момент воспроизводится браузером, если используются теги-источники;
• videoHeight и videoWidth iзадают исходные размеры видеокадра;
• volume указывает значение в диапазоне от 0 до 1, определяющее уровень громкости (мобильные устройства игнорируют это свойство; в них используются аппаратные регуляторы громкости);
• currentTime задает текущую позицию воспроизведения в секундах;
• duration - общее время длительности медийного файла в секундах;
• buffered - массив, указывающий, какие части медийного файла были скачаны;
• playbackRate - скорость воспроизведения видео (по умолчанию - 1). Измените это значение для ускорения (1.5) или замедления (0.5) воспроизведения;
• ended указывает, достигнут ли конец видео;
• paused всегда равен true при запуске, а затем - false (как только начинается воспроизведение видео);
• seeking указывает, что браузер пытается скачать следующую порцию и переходит в новую позицию.

Медиа-объекты HTML5 также включают следующие методы, применяемые при написании скриптов:

• play пытается загрузить и воспроизвести видео;
• pause останавливает проигрывание текущего видеоролика;
• canPlayType(type) ) распознает, какие кодеки поддерживает браузер. Если вы посылаете некий тип вроде video/mp4, браузер ответит строкой probably, maybe, no или пустой строкой;
• load iвызывается для загрузки нового видео, если вы изменяете атрибут src.

В спецификации HTML5 Media определено 21 событие; вот некоторые из наиболее часто используемых:

• loadedmetadata срабатывает, когда становятся известны длительность и размеры;
• loadeddata срабатывает, когда браузер может начать воспроизведение с текущей позиции;
• play запускает видео, когда оно больше не находится в состоянии paused или ended;.
• playing срабатывает, когда воспроизведение началось после паузы, буферизации или поиска;
• pause останавливает проигрывание видео;
• ended срабатывает, когда достигается конец видео;
• progress указывает, что была загружена очередная порция медийного файла;
• seeking равно true, когда браузер начал поиск;
• seeked равно false, когда браузер закончил поиск;
• timeupdate срабатывает, когда воспроизводится медиа-ресурс;
• volumechange срабатывает, когда изменилось свойство muted или volume.

Эти свойства, методы и события являются мощными средствами для создания пользователям богатой мультимедийной среды, полностью управляемой HTML, CSS и JavaScript. В базовом примере на рис. 1 я сначала создаю переменные для всех элементов страницы:

// Find the DOM objects var video = document.getElementById("video1"), playBtn = document.getElementById("video1-play"), muteBtn = document.getElementById("video1-mute"), current = document.getElementById("video1-current"), duration = document.getElementById("video1-duration");

Затем я добавляю событие click к своим кнопкам для управления воспроизведением медиа-данных. Здесь я переключаю состояние «старт/пауза» для видео и изменяю надпись на кнопке:

// Toggle the play/pause state playBtn.addEventListener("click", function() { if (video.paused || video.ended) { video.play(); playBtn.value = "Pause"; } else { video.pause(); playBtn.value = "Play"; } }, false);

Наконец, я добавляю события к объекту media для отслеживания его текущего состояния. Я слушаю событие timeupdate и обновляю панель элементов управления значением текущего времени из playhead, форматируя секунды в стиле «минуты:секунды»:

// Update the current time video.addEventListener("timeupdate", function() { current.innerHTML = formatTime(media.currentTime); }, false);

Проблемы с HTML5 Media

К сожалению, заставить HTML5 Media согласованно работать во всех браузерах и на всех устройствах не так-то просто, как в моем примере. Я уже упоминал, что не все браузеры поддерживают элемент track, а теперь рассмотрю еще три проблемы, с которыми вы столкнетесь при использовании тегов audio и video, и покажу решения, позволяющие преодолеть эти проблемы. В конце статьи я расскажу о некоторых библиотеках JavaScript, которые обертывают все эти решения в легко развертываемые пакеты.

Поддержка аудио- и видеокодеков HTML5 Первая проблема, с которой вы столкнетесь при разработке с применением HTML5 Media, - несогласованная поддержка аудио- и видеокодеков. Мои примеры работают в Internet Explorer 9 и выше, Chrome и Safari, но не будут работать в Firefox или Opera, потому что, несмотря на поддержку этими браузерами HTML5-тега video, они не поддерживают кодек h.264. Из-за вопросов с правами на интеллектуальную собственность поставщики браузеров разделились на два лагеря в отношении кодеков, и это приводит нас к табл. 1 , где показано, какие кодеки работают с теми или иными браузерами.

Табл. 1. Поддержка видеокодеков в различных браузерах

Internet Explorer 9+, Safari, Chrome и мобильные устройства (iPhone, iPad, Android 2.1+ и Windows Phone 7.5+) - все они поддерживают видеокодек h.264, который обычно помещается в контейнер MP4. Firefox и Opera, напротив, поддерживают видеокодек VP8, который помещается в контейнер WebM. Chrome также поддерживает WebM, и поставщик этого браузера на каком-то этапе готов отказаться от поддержки h.264. Internet Explorer 9+ может визуализировать WebM, если пользователь сам установит нужный кодек. Наконец, Firefox, Opera и Chrome также поддерживают кодек Theora, помещаемый в контейнер Ogg, но поставщики этих браузеров постепенно сокращают его поддержку, отдавая предпочтение WebM (если только вам не требуется поддерживать Firefox 3.x), поэтому простоты ради я выкинул его из таблицы и примеров.

Что касается аудио, поставщики браузеров и здесь разделились на два лагеря, при этом первая группа (Internet Explorer 9, Chrome и Safari) поддерживает привычный формат MP3, а вторая (Firefox и Opera) - Vorbis в контейнере Ogg. Многие браузеры также умеют проигрывать WAV-файлы. См. табл. 2 .

Табл. 2. Поддержка аудиокодеков в различных браузерах

Чтобы вы могли справиться с этими различиями, теги video и audio поддерживают несколько дочерних тегов source, позволяющих браузеру выбирать тот медийный файл, который они способны воспроизвести. Каждый элемент source имеет два атрибута:

• src указывает URL медийного файла;
• type задает mimetype и дополнительно конкретный видеокодек.

Чтобы предложить выбор из видеокодеков h.264 и VP8, вы могли бы использовать такую разметку:

Заметьте, что для более ранних сборок iOS и Android нужно первым указывать MP4-файл.

Эта разметка будет работать во всех современных браузерах. Код на JavaScript будет управлять тем, какой видеокодек выберет браузер. Для тега audio разметка выглядит примерно так:

Если вы размещаете аудио- и видеоконтент на своем сервере, то у всех ваших медийных файлов должен быть корректный MIME-тип, а иначе многие браузеры, готовые к работе с HTML5 (например, Internet Explorer и Firefox), не будут воспроизводить медиа-данные. Чтобы добавить MIME-типы в IIS 7, откройте Features View, дважды щелкните MIME Types, выберите кнопку Add в секции Actions, добавьте расширение (mp4) и MIME-тип (video/mp4), а затем нажмите OK. Потом проделайте то же самое для остальных типов (webm и video/webm), которые вы планируете использовать.

Поддержка более старых браузеров Включение двух медийных файлов (таких как MP4 и WebM для видео) заставит HTML5 Media работать во всех современных браузерах. Но, когда устаревшие браузеры вроде Internet Explorer 8 встречают тег video, они не могут отображать видео. Однако они будут выполнять рендеринг HTML, помещенного между открывающим тегом и закрывающим тегом . В следующем примере в этом случае пользователю выводится сообщение с просьбой перейти на более новый браузер:

Please update your browser

Чтобы пользователи браузеров, не готовых к работе с HTML5, могли проигрывать видео, вы можете предоставить альтернативу в виде встроенного Flash, который воспроизводит тот же MP4, который вы предлагаете пользователям Internet Explorer 9, Safari и Chrome, как показано на рис. 3 .

Рис. 3. Воспроизведение видео с помощью Flash

Please update your browser or install Flash

Эта разметка позволяет всем браузерам проигрывать видеоролики. Браузеры, не поддерживающие ни HTML5, ни Flash, будут выводить сообщение, предлагающее пользователю перейти на новую версию. Подробнее о том, как и почему работает эта вложенная разметка, см. статью Крока Кеймена (Kroc Camen) «Video for Everybody» (camendesign.com/code/video_for_everybody).

Однако у этого подхода есть свои недостатки. Во-первых, нужно поддерживать много разметки. Во-вторых, вы должны кодировать и хранить минимум два медийных файла. И в-третьих, любые элементы управления HTML/JavaScript, добавляемые вами на страницу, не будут работать со встраиваемым проигрывателем Flash. Позже я предложу несколько библиотек JavaScript, которые могут помочь преодолеть эти трудности, но сначала обсудим последнюю проблему.

Поддержка полноэкранного воспроизведения Flash и Silverlight поддерживают полноэкранный режим просмотра видео и другого контента. Вы можете реализовать эту функцию, создав простую кнопку и связав ее с командой переключения в полноэкранный режим на ActionScript (для Flash) или C# (для Silverlight).

В современных браузерах есть похожий полноэкранный режим, в который можно перейти командой меню или нажатием какой-либо клавиши (чаще всего F11 или Ctrl+F). Но до недавних пор JavaScript API не позволял разработчикам инициировать переключение в этот режим при нажатии кнопки на странице. Это означало, что HTML5-видео можно было смотреть только в полном окне браузера, но не на всем экране.

В конце 2011 года в Safari, Chrome и Firefox добавили поддержку предложенного W3C интерфейса FullScreen API, который обеспечивает функциональность, похожую на имеющуюся в Flash и Silverlight. Группа разработчиков Opera в настоящее время занимается реализацией этого интерфейса, но группа разработчиков Internet Explorer на момент написания этой статьи пока не решила, будет ли она реализовать этот API. Браузер в стиле Metro в Windows 8 будет полноэкранным по умолчанию, однако пользователям настольного Internet Explorer потребуется вручную переключаться в полноэкранный режим через команду меню или с помощью клавиши F11.

Для перехода в полноэкранный режим в браузерах с его поддержкой вы вызываете метод requestFullscreen применительно к элементу, который нужно показать на полном экране. Команда выхода из полноэкранного режима вызывается из объекта document - это метод document.exitFullscreen. W3C-предложение все еще прорабатывается, поэтому я не стану здесь углубляться в детали, но я отслеживаю состояние этого API в своем блоге bit.ly/zlgxUA .

Библиотеки JavaScript для видео и аудио в HTML5

Ряд разработчиков создал библиотеки JavaScript, которые упрощают работу с видео и аудио в HTML5 за счет интеграции всего релевантного кода в единый пакет. Вот некоторые из лучших библиотек с открытым исходным кодом: MediaElement.js, jPlayer, VideoJS, Projekktor, Playr и LeanBack. Полный список со сравнением возможностей вы найдете по ссылке praegnanz.de/html5video .

Вам нужно лишь предоставить тег video или audio, а библиотека автоматически создаст набор настраиваемых элементов управления, а также вставит проигрыватель Flash для браузеров, не поддерживающих HTML5 Media. Единственная проблема в том, что проигрыватели Flash, вставляемые многими библиотеками, не всегда выглядят или функционируют аналогично проигрывателю HTML5. Это значит, что любое HTML5-событие, добавленное вами, не будет работать с проигрывателем Flash и любая используемая вами собственная CSS не будет видна.

На моей работе меня попросили создать видеоплеер HTML5 с синхронизированными слайдами и текстом (transcripts) (см. демонстрацию по ссылке online.dts.edu/player). У нас была библиотека более чем с 3000 видеофайлов в формате h.264, и перекодировать их в WebM для Firefox и Opera было просто нереально. Нам также нужна была поддержка более старых браузеров, таких как Internet Explorer 8, но переключение на отдельный проигрыватель Flash в данном случае не годилось, так как он не реагировал бы на события для слайдов и текста.

Чтобы преодолеть эти трудности, я создал один из плееров, упомянутых ранее под общим названием MediaElement.js (mediaelementjs.com). Этот библиотека JavaScript с открытым исходным кодом (MIT/GLPv2), которая включает специальные версии проигрывателей Flash и Silverlight, имитирующих HTML5 API. Вместо совершенно автономного проигрывателя Flash в MediaElement.js используется Flash только для рендеринга видео, а затем видео обертывается в JavaScript-объект, который выглядит как HTML5 API. В конечном счете это позволяет обновить все браузеры так, чтобы они могли использовать тег video и дополнительные кодеки, изначально не поддерживаемые ими. Для запуска проигрывателя применительно к одному файлу в формате h.264 с использованием jQuery вам потребуется добавить лишь следующий код:

jQuery(document).ready(function() { $("video1").mediaelementplayer(); });

Для браузеров, не поддерживающих тег video (например, Internet Explorer 8) или кодек h.264 (Firefox и Opera), MediaElement.js вставит компенсационную прослойку Flash (или Silverlight - в зависимости от того, что установил пользователь), чтобы «обновить» такие браузеры для поддержки свойств и событий HTML5 Media, о которых я рассказывал.

Для поддержки аудио можно использовать единый MP3-файл:

В качестве альтернативы вы могли бы включить единый файл Ogg/Vorbis:

И вновь для браузеров, не поддерживающих тег audio (Internet Explorer 8) или кодек Ogg/Vorbis (Internet Explorer 9+ и Safari), MediaElement.js вставит компенсационную прослойку, чтобы все эти браузеры функционировали так, будто они изначально поддерживают этот кодек. (Заметьте, что Ogg/Vorbis не будет воспроизводиться на мобильных устройствах.)

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

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

Описание

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

Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры

Кодек	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
AAC

Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег .

Синтаксис Атрибуты Звук начинает играть сразу после загрузки страницы. Добавляет панель управления к аудиофайлу. Повторяет воспроизведение звука с начала после его завершения. Используется для загрузки файла вместе с загрузкой веб-страницы. Указывает путь к воспроизводимому файлу. Закрывающий тег

Обязателен.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Александр Клименков - Четырнадцать

Тег audio не поддерживается вашим браузером. Скачайте музыку.

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение аудиофайла

Браузеры

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.