Атрибут | Описание |
---|---|
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;
}