Элементы мультимедиа

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

Поддержка браузера

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

В HTML имеются два элемента для работы с мультимедиа:

Audio.
Video.

Первый элемент, как следует из названия, служит для добавления аудио-файлов. Простейший пример использования элемента audio в HTML 5 приведён ниже:

<html>
<head>
</head>
<body>
<audio controls>
<source src="Путь к аудиофайлу /gimn.mp3" type="audio/mpeg">
</audio>
<p>При нажатии на клавишу Play заиграет гимн Российской Федерации.</p>
</body>
</html>

При нажатии на клавишу Play заиграет гимн Российской Федерации.

У тега <audio> имеются три атрибута:

Атрибут src - указывает путь к файлу для проигрывания.
Атрибут autoplay - сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы.
Атрибут loop - указывает, сколько раз необходимо проиграть файл (разумеется, если пользователь не закроет страницу).

Обратите внимание, что внутри тега <audio> имеется текст, который служит для информации о мелодии, что является полезным, например, для людей с ограниченными возможностями.

HTML аудио-как это работает

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

Элемент <source> позволяет указать альтернативные аудиофайлы, которые могут быть выбраны обозревателем. Браузер будет использовать первый распознанный формат.

Текст между тегами <audio> и </audio> будет отображаться только в обозревателях, не поддерживающих элемент <audio>.

Аудио-методы, свойства и события HTML

HTML5 определяет методы, свойства и события DOM для элемента <audio>.

Это позволяет загружать, воспроизводить и приостанавливать аудио, а также задавать длительность и громкость.

Есть также события DOM, которые могут уведомить вас, когда звук начинает играть, приостановлено и т.д.

Для полной информации по тегам перейдите к справке аудио/видео.

Аудио форматы

Формат	Файл	Описание
MIDI	.mid .midi	MIDI (музыкальный инструмент цифровой интерфейс). Основной формат для всех электронных музыкальных устройств, таких как синтезаторы и PC Sound cards. MIDI файлы не содержат звука, но цифровые заметки, которые могут быть воспроизведены электроникой. Хорошо играет на всех компьютерах и музыкальном оборудовании, но не в веб-браузерах.
RealAudio	.rm .ram	Realaudio. Разработано реальными носителями, чтобы обеспечить потоковую передачу аудио с низкой пропускной способностью. Не воспроизводится в веб-браузерах.
WMA	.wma	WMA (звук Windows Media). Разработанный корпорацией Майкрософт. Обычно используется в музыкальных плеерах. Хорошо играет на компьютерах с Windows, но не в веб-обозревателях.
AAC	.aac	AAC (улучшенное звуковое кодирование). Разработанный Apple в качестве формата по умолчанию для iTunes. Хорошо играет на компьютерах Apple, но не в веб-браузерах.
WAV	.wav	Wav. Разработанный IBM и Microsoft. Хорошо воспроизводит операционные системы Windows, Macintosh и Linux. Поддерживается HTML5.
Ogg	.ogg	Ogg. Разработанный фондом Xiph.org. Поддерживается HTML5.
MP3	.mp3	MP3 файлы на самом деле звуковая часть MPEG файлов. MP3 является самым популярным форматом для музыкальных проигрывателей. Сочетает в себе хорошее сжатие (небольшие файлы) с высоким качеством. Поддерживается всеми браузерами.
MP4	.mp4	MP4 является формат видео, но также может быть использован для аудио. MP4 видео является предстоящим видео формат в Интернете. Это приводит к автоматической поддержки MP4 аудио всеми браузерами.

HTML Видео

Элемент <video> используется для добавления на страницу видео-файлов.

<html>
<head>
</head>
<body>
<video controls>
<source src="Путь к видеофайлу/Pexels Videos 2815411.mp4">
</video>
<p>По щелчку на видео начнется воспроизведение</p>
</body>
</html>

По щелчку на видео начнется воспроизведение

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

Это хорошая идея, чтобы всегда включать width и height атрибутов. Если высота и ширина не заданы, страница может мерцать во время загрузки видео.

Элемент <source> позволяет указать альтернативные видеофайлы, которые могут быть выбраны обозревателем. Браузер будет использовать первый распознанный формат.

Текст между тегами <video> и </video> будет отображаться только в обозревателях, не поддерживающих элемент <video>.

Видео форматы

Формат	Файл	Описание
MPEG	.mpg .mpeg	Mpeg. Разработано группой экспертов Moving Pictures. Первый популярный формат видео в Интернете. Используется для поддержки всех браузеров, но не поддерживается в HTML5 (см. MP4).
AVI	.avi	AVI (чередование аудио видео). Разработанный корпорацией Майкрософт. Обычно используется в видеокамерах и телевизионной аппаратуре. Хорошо играет на компьютерах с Windows, но не в веб-обозревателях.
WMV	.wmv	WMV (видео Windows Media). Разработанный корпорацией Майкрософт. Обычно используется в видеокамерах и телевизионной аппаратуре. Хорошо играет на компьютерах с Windows, но не в веб-обозревателях.
QuickTime	.mov	Quicktime. Разработанный компанией Apple. Обычно используется в видеокамерах и телевизионной аппаратуре. Хорошо играет на компьютерах Apple, но не в веб-браузерах. (см. MP4)
RealVideo	.rm .ram	RealVideo. Разработано реальными носителями, чтобы обеспечить потоковую передачу видео с низкой пропускной способностью. Он по-прежнему используется для онлайн-видео и Интернет-телевидение, но не играет в веб-браузерах.
Flash	.swf .flv	Вспышки. Разработанный Macromedia. Часто требуется дополнительный компонент (подключаемый модуль) для воспроизведения в веб-браузерах.
Ogg	.ogg	Theora OGG. Разработанный фондом Xiph.org. Поддерживается HTML5.
WebM	.webm	Webm. Разработано веб-гигантами, Mozilla, Opera, Adobe и Google. Поддерживается HTML5.
MPEG-4 or MP4	.mp4	MP4. Разработано группой экспертов Moving Pictures на основе QuickTime. Обычно используется в новых видеокамерах и ТВ оборудовании. Поддерживается всеми браузерами которые работают с HTML5. Рекомендовано YouTube.