Как вставить аудио и видео на сайт

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

За вставку аудиопроигрывателя на сайт отвечает элемент audio. Рассмотрим разметку:

Рассмотрим атрибуты:

src — В значении этого атрибута нужно указать адрес расположения аудиофайла.

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

autoplay — Если поставить этот атрибут, то аудио будет воспроизводиться автоматически при полной его загрузке.

loop — Если стоит этот атрибут, то аудио будет воспроизводиться снова после его окончания, то есть произойдет зацикливание.

muted — Аудио будет без звука если поставить этот атрибут.

preload — Если в значении этого атрибута поставить auto, то аудиоряд будет передан сразу после загрузки страницы, если none, то только после того как пользователь нажмёт play, если metadata, то загрузится только системная информация о файле.

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

Если браузер не поддерживает элемент audio или указан не поддерживаемый тип, то появится сообщение заключённое между тегами audio.

Сведём в таблицу аудиоформаты и версии популярных браузеров, которые их поддерживают.

Формат аудио MIME-тип Chrome Firefox Opera Internet Explorer Safari
WAV audio/wav 3+ 3.5+ 10.6+ 3.1+
Ogg/Vorbis audio/ogg 3+ 3.5+ 10.5+
AAC audio/aac 3+ 22+ 15+ 9+ 3.1+
MP3 audio/mpeg 3+ 22+ 15+ 9+ 3.1+
WebM audio/webm 6+ 4+ 10.6+

За вставку видеопроигрывателя на сайт отвечает элемент video. Рассмотрим разметку:

Рассмотрим атрибуты:

src — В значении этого атрибута нужно указать адрес расположения файла.

poster — В значении этого атрибута нужно указать адрес расположения изображения, которое будет показано перед воспроизведением файла.

width и height — Эти атрибуты задают ширину и высоту соответственно.

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

autoplay — Если поставить этот атрибут, то ролик будет воспроизводиться автоматически при полной его загрузке.

loop — Если стоит этот атрибут, то видеоролик будет воспроизводиться снова после его окончания, то есть произойдет зацикливание.

muted — Ролик будет без звука если поставить этот атрибут.

preload — Если в значении этого атрибута поставить auto, то видеоряд будет передан сразу после загрузки страницы, если none, то только после того как пользователь нажмёт play, если metadata, то загрузится только системная информация о файле.

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

Если браузер не поддерживает элемент video или указан не поддерживаемый тип, то появится сообщение заключённое между тегами video.

Сведём в таблицу видео форматы и версии популярных браузеров, которые их поддерживают.

Формат видео MIME-типы и кодеки Chrome Firefox Opera Internet Explorer Safari
Ogg/Theora video/ogg; codecs="theora, vorbis" 4+ 3.5+ 11.5+
WebM video/webm; codecs="VP8, vorbis" 6+ 4+ 11.5+
H.264 video/mp4; codecs="avc1.42E01E, mp4a.40.2" 4+ 21+ 25+ 9+ 3.2+
Поделиться