Аудио и видео в HTML5
HTML5-элемент <audio> используется
для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка
имеет следующий вид:
<audio
src="name.ogg" controls></audio>
HTML
Атрибут controls добавляет
отображение браузерами интерфейса управления аудио плеера — кнопки
воспроизведения, паузы, громкости.
В
настоящий момент не существует аудио формата, который бы работал во всех
браузерах, поэтому для обеспечения доступности контента максимально широкой
аудитории рекомендуется включать несколько источников звука, представленных с
использованием атрибута src элемента <source>.
Одновременно можно добавить резервный контент для браузеров, которые не
поддерживают элемент <audio>.
<audio
controls>
<source src="name.ogg" type="audio/ogg">
<source src="name.mp3" type="audio/mpeg">
<a rel="nofollow ugc" target="_blank" href="sounds/name.mp3">Скачать name.mp3</a>
</audio>
HTML
ТАБЛИЦА
1. АТРИБУТЫ ТЕГА <AUDIO>
|
Атрибут
|
Описание, принимаемое значение
|
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.
Альтернативные медиа-ресурсы
Элемент <source> используется
для добавления нескольких медиа-ресурсов
для <audio> и <video>. Указывает на альтернативные
видео/аудио файлы, которые браузер может выбрать из предложенных на основании
поддерживаемого им типа носителя или кодека.
ТАБЛИЦА
2. АТРИБУТЫ ТЕГА <SOURCE>
|
Атрибут
|
Описание, принимаемое значение
|
media
|
Определяет тип медиа-устройства (т.е. для каких устройств
оптимизирован файл).
|
src
|
Содержит абсолютный или относительный URL-адрес медиафайла.
|
type
|
Определяет MIME-тип медиафайла.
|
4.
Добавление субтитров и заголовков
Элемент <track> используется
в качестве дочернего элемента <audio> и <video>.
Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой
текстовой информации, которая должна быть видна во время воспроизведения аудио
или видеофайла.
ТАБЛИЦА
3. АТРИБУТЫ ТЕГА <TRACK>
|
Атрибут
|
Описание, принимаемое значение
|
default
|
Указывает, что данная дорожка воспроизводится по умолчанию.
Только один элемент <track> может содержать данный атрибут.
|
kind
|
Указывает тип текстовой дорожки, по умолчанию выводятся субтитры
(subtitles). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде
текста поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по
медиафайлу.
descriptions — добавляет звуковое описание происходящего в видео (для
слепых пользователей).
metadata — метаданные, используемые скриптами, не отображаются для
пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается
в виде субтитров к видео.
|
label
|
Добавляет название дорожки. Если этот атрибут не задан, браузер
применит значение по умолчанию.
|
src
|
Содержит абсолютный или относительный URL-адрес данных текстовой
дорожки.
|
srclang
|
Язык воспроизводимой дорожки.
|
Видео
В
простом варианте HTML-разметка для размещения видеофайла на странице имеет
следующий вид:
<video
src="video.ogv" controls></video>
HTML
Атрибут controls отвечает
за появление элементов управления видеоплеером. Вы можете добавить изображение
с помощью атрибута poster, которое браузер будет использовать, пока
загружается видео или пока пользователь не нажмет на кнопку воспроизведения, а
также задать высоту и ширину видео.
Как
и в случае с аудиофайлами, рекомендуется перечислять
в <source> все форматы, начиная с более предпочтительного.
Также нужно указывать MIME-тип для каждого видеофайла.
<video
controls width="400" height="300">
<source src="video.mp4" type="video/mp4"><!-- MP4
для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
<source src="video.webm" type="video/webm"><!--
WebM/VP8 для Firefox4, Opera, и Chrome -->
<source src="video.ogv" type="video/ogg"><!--
Ogg/Vorbis для старых версий браузеров Firefox и Opera -->
<object data="video.swf"
type="application/x-shockwave-flash"><!-- добавляем
видеоконтент для устаревших браузеров, в которых нет поддержки элемента video
-->
<param name="movie" value="video.swf">
</object>
</video>
HTML
ТАБЛИЦА
1. АТРИБУТЫ ТЕГА <VIDEO>
|
Атрибут
|
Описание, принимаемое значение
|
autoplay
|
Автоматическое воспроизведение видеоофайла сразу же после
загрузки страницы.
|
controls
|
Указывает браузеру, что нужно отобразить базовые элементы
управления воспроизведением (воспроизведение, пауза, громкость).
|
height
|
Задает высоту окна для отображения видеоданных, возможные
значения: px или %
|
loop
|
Циклическое воспроизведение видеофайла.
|
muted
|
Выключает звук при воспроизведении видеофайла.
|
poster
|
URL файла изображения, которое будет отображаться во время
загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку
PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
|
preload
|
Атрибут, отвечающий за предварительную загрузку видеоконтента.
Не является обязательным, некоторые браузеры игнорируют его. Возможные
значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен,
когда пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы
определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.
|
src
|
Содержит абсолютный или относительный URL-адрес видеофайла.
|
width
|
Задает ширину окна для отображения видеоданных, возможные
значения: px или %
|
2.
Встраиваемый интерактивный контент
Элемент <embed> определяет
контейнер для внешнего приложения или интерактивного содержимого (другими
словами, плагина). Большинство браузеров поддерживало данный элемент на
протяжении долгого времени. Тем не менее, данный тег не был включен в
спецификацию HTML4, его добавили в спецификацию HTML5. С
помощью <embed> на веб-страницы можно добавлять не только видеофайлы,
но и векторные изображения в формате swf:
<embed
src="movie.mov" type="video/quicktime"
width="640" height="480">
<embed
src="helloworld.swf">
HTML
ТАБЛИЦА
2. АТРИБУТЫ ТЕГА <EMBED>
|
Атрибут
|
Описание, принимаемое значение
|
height
|
Определяет высоту встраиваемого контента
в px или %.
|
src
|
Содержит абсолютный или относительный URL-адрес медиафайла.
|
type
|
Определяет MIME-тип встраиваемого файла.
|
width
|
Определяет ширину встраиваемого контента
в px или %.
|
3. Видеокодеки
При
просмотре видео проигрыватель должен его декодировать. Одни проигрыватели
используют программное декодирование видеопотока, другие используют аппаратное
декодирование.
Важно! Поскольку
каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение
видео-контента во всех браузерах, видео-файл нужно размещать в нескольких
форматах.
H.264 —
высококачественный кодек от фирмы MPEG, делится на профили для поддержки как
устройств с минимальными возможностями, так и устройств высокого разрешения.
Ogg
Theora — открытый бесплатный стандарт для видео, качество и
производительность несколько ниже стандарта H.264.
VP8 —
открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в
Firefox, Chrome и Opera.
Любой
видеофайл является файловым контейнером, в котором хранятся другие файлы.
Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные
содержат информацию о данном видеоролике — изображение обложки, субтитры и пр.
К популярным форматам видеоконтейнеров относятся следующие:
Ogg (.ogv,
.oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека
Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg.
MPEG
4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает
в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного
спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4.
WebM (.webm)
— формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и
аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm.
Audio
Video Interleave (.avi) — формат предназначен для записи звука и
движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.
Matroska (.mkv)
— популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или
Theora.
MIME-тип: video/x-matroska, audio/x-matroska.
На
данный момент браузеры поддерживают три основных видео формата:
Формат
|
Видеокодек
|
Аудиокодек
|
.mp4
|
H.264
|
AAC
|
.ogg/.ogv
|
Theora
|
Vorbis
|
.webm
|
VP8
|
Vorbis
|
Видео в формате .avi на сайте средствами HTML5 не
воспроизводится. Поэтому его необходимо перекодировать в эти три формата с
соответствующими видео и аудиокодеками для вывода на сайте.
Для этого можно использовать видеоконвертеры, указанные на странице ниже.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.