Описание

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

Браузеры

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

Описание

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

Браузеры

Когда впервые были введены 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, особенно в сочетании с предложенными мной великолепными библиотеками, достаточно легко добавить в существующие веб-сайты и они должны быть средствами по умолчанию в любых новых проектах.

Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у 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 не поддерживается вашим браузером.
Скачайте музыку.

andew

2015-08-10T19:23:37+00:00

2016-02-28T17:11:05+00:00

11937

В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы.

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

Скринкаст: Пример использования шаблонов

Скачать видео

Скринкаст : примеры использования шаблонов из статьи - сайт

HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам или через вложенные теги < source src=" URL"> . Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264 ), и для аудио это формат mp3 и m4a . Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox , Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4 (H.264 ) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4 /m4a , то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио.

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

Форматы файлов и их MIME типы Файлы мультимедиа Расширения Mime тип

Аудио mp3	mp3	audio/mpeg
Аудио mp4	m4a	audio/mp4
Аудио webm	webm	audio/webm
Аудио ogg	ogg	audio/ogg
Видео mp4 (H.264)	mp4	video/mp4
Видео webm	webm	video/webm
Видео ogg	ogv	video/ogg

Инструменты кодирования аудио и видео файлов

Для кодирования видео и аудио файлов в приведенные выше web форматы можно воспользоваться открытой программой , которая поддерживает конвертацию аудио и видео файлов в основные распространенные для веба форматы (MP4 , WebM , Ogg Theora , MP3 и т.п. ). Miro Video Converter доступен для разных операционных систем - Windows , Mac и Linux и является графической оболочкой для консольных утилит и , которые удобно использовать на web сервере для обработки загружаемого видео и аудио в автоматическом режиме.

: HTML5 код примера audio с микроразметкой schema.org: Заголовок аудио

HTML5 audio не поддерживается вашим браузером.

Скачать audio

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

Audioobject itemType = http://schema.org/AudioObject name = Заголовок аудио description = Описание аудио... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = Full URL to image.jpg alternatename = Альтернативный заголовок аудио contenturl href = URL to file.mp3 text = Скачать audio author person itemType = http://schema.org/Person url href = URL text = Имя автора name = Имя автора image = Full url to person.jpg

Минимальная разметка аудио по schema.org должна включать itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Остальные свойства не являются обязательными.

Пример стандартного использование HTML5 тега :

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

HTML5 код примера video с микроразметкой schema.org: Заголовок видео

Смотреть на YouTube

HTML5 video не поддерживается вашим браузером.

Скачать видео: Заголовок видео

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

Videoobject itemType = http://schema.org/VideoObject name = Заголовок видео thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL to video-thumbnail.jpg|png width = 100 height = 100 duration = PT14M59S isfamilyfriendly = true uploaddate = 2015-12-31 description = Краткое описание для видео... url href = URL to file.mp4 text = Заголовок видео author person itemType = http://schema.org/Person url href = URL to author web page text = author name name = author name image = Full URL to author.jpg thumbnailurl = URL to file.jpg|png

Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop ="author" , который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для video-thumbnail яндекс требует указывать микроразметку по schema.org как itemprop ="thumbnail" в виде ImageObject , а Google требует указывать как itemprop ="thumbnailUrl" , поэтому приходиться вставлять video-thumbnail файл два раза, и поэтому второй тег img получил стиль display: none , что бы не отображаться в браузере. Можно вместо использования img тега с display:none передать это свойство тегом link через атрибут href . Также, несмотря на то, что микроразметку можно передавать через не показываемые пользователю теги meta и link , рекомендуется все же, по возможности, добавлять микроразметку преимущественно в теги, которые будут выводиться пользователю. Валидацию микроразметки schema.org можно сделать по этим ссылкам: , . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой VideoObjec t на сайте . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube , то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL - ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер ), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью , в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Атрибуты и тегов:

Атрибуты src , preload , autoplay , mediagroup , loop , muted , controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов и .

атрибут autoplay: или или

атрибут autoplay задается его присутствием в теге или и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplay ="autoplay ", что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload , который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует.

атрибут controls: или или

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

атрибут loop: или или

атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге или и не имеет параметров. По умолчанию атрибут loop отсутствует.

атрибут preload:

атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений:
- none - не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload , поэтому для него можно вообще не вставлять атрибут preload в тег или для этого случая.
- metadata - не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла.
- auto - выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге или задан атрибут preload ="" с пустым значением, то будет использовано значение auto для него.
- Значение атрибута preload будет отменено, если использован атрибут autoplay .

атрибут src:

атрибут src тега или позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах < source src=" URL"> .

Атрибут poster тега video:

атрибут poster используется только в теге и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео.

Атрибуты width и height тега video:

атрибуты width и height применяются только к тегу и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только width , а по высоте плеер подстроиться сам.
Если какой-либо из этих параметров или оба не будут заданы, то тогда не заданный(е) параметр(ы) будут браться от соответствующего размера картинки, указанной в атрибуте poster .
Если же атрибут poster будет отсутствовать, то эти параметры будут устанавливаться как: для width = 300 px и для height = 150px. Что бы не высчитывать и не согласовывать размеры области видео под пропорции самого клипа, я бы рекомендовал задавать только одни параметр width , тогда высота (height ) области воспроизведения будет выбрана автоматически исходя из пропорций видео.
Также, на размеры и оформление HTML5 плеера можно влиять через свойства CSS применяемые к тегам или .

Атрибут muted: или или

атрибут muted устанавливает своим наличием в тегах или звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует.

Атрибут crossorigin:

атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials . CORS () - это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов.

Атрибут mediagroup: div { margin: 1em auto; position: relative; width: 400px; height: 300px; } video { position; absolute; bottom: 0; right: 0; } video:first-child { width: 100%; height: 100%; } video:last-child { width: 30%; }

атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами.

Теги и требуют наличие закрывающего тега.

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

Тег :

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

В большинстве случаев тег выглядит так:

и в нем присутствует всегда атрибут src и type , который в большинстве случаев имеет только MIME-тип.

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

атрибут src= "URL" тега задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта.
атрибут type ="MIME-тип" тега или более полно type="MIME-тип; codecs="кодек"" указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для.mp3 - type="audio/mpeg". Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам.
атрибут media ="all|braille|handheld|print|screen|speech|projection|tty|tv" тега указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения.

Тег :

Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions - не поддерживаются пока) и метаданные (metadata - не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами.

- не имеет закрывающего тега.

Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web Video Text Tracks Format ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT , лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью.

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

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

subtitles - субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров.
captions - заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию.
chapters - главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу.
descriptions - описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader.
metadata - метаданные для передачи js скриптам.

Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt .

Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен "ru", для английского "en".

Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

Пример тегов :

Windows 8