Мультимедийные элементы

Атрибут Описание
width Указывает ширину элемента в пикселях
height Указывает высоту элемента в пикселях
<source> Определяет источник аудио- или видео- файлов
<track> Позволяет указать текстовую дорожку (субтитры) для медийных элементов.
controls Добавляет панель управления к медийному файлу
autoplay Автоматически запускает проигрывание после загрузки страницы
loop После завершения автоматически перезапускает проигрывание сначала
muted Отключает звук при воспроизведении
poster Указывает адрес изображения, которое будет отображаться, пока видео не доступно или не воспроизводится.

HTML5 ввел новый стандарт для встраивания аудиофайла на веб-страницу. Вы можете вставить аудиофайл на страницу с помощью элемента <audio>:

<audio controls>
 <source src="file.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>

Аналогично, в HTML5 появился элемент <video> для внедрения видео на страницу.

<video width="500" height="700" controls>
 <source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает элемент video.
</video>

Видео и аудио элементы могут содержать один или несколько источников. Чтобы указать источник, используйте либо атрибут src, либо элемент <source>, а браузер выберет наиболее подходящий.

<!-- Пример подключения видео -->
<video src="RecordPlayer.webm" autoplay muted poster="RecordPlayer.jpg">
    Извените, ваш браузер не поддерживает встроенное видео, но
    вы можете <a href="RecordPlayer.webm">его скачать</a>
    и посмотреть в своем любимом видеоплеере!
</video>

Обратите внимание, что во многих браузерах автопроигрывание не работает без отключения звука. Поэтому нужно использовать атрибуты autoplay muted

<!-- Видео с субтитрами -->
<video src="RecordPlayer.webm">
    <track kind="subtitles" src="RecordPlayer.en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="RecordPlayer.ru.vtt" srclang="ru" label="Русский">
</video>
<!-- Видео с несколькими источниками -->
<video width="480" controls poster="RecordPlayer.jpg" >
    <source src="RecordPlayer.webm" type="video/webm">
    <source src="RecordPlayer.mp4" type="video/mp4">
    <source src="RecordPlayer.flv" type="video/flv">
    Извените, ваш браузер не поддерживает встроенное видео
</video>

<!-- Простое автоматическое воспроизведение аудио -->
<audio src="Road_to_Moscow.mp3" autoplay>
    Извените, ваш браузер не поддерживает встроенное видео
</audio>

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

<!-- Аудио с панелью управления -->
<audio src="Road_to_Moscow.mp3" controls>
    Извените, ваш браузер не поддерживает встроенное видео
</audio>

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

<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
</video>

Нижеприведенный код CSS обеспечивает резервный вариант, если видео нельзя загрузить. Обратите внимание, что рекомендуется использовать первый кадр видео для video.jpg.

#videobg {
    background: url(video.jpg) no-repeat;
    background-size: cover;
}