Характеристики тега
В каких браузерах работает?
9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+ |
В каких спецификациях используется?
HTML | - | - | 5.0 |
XHTML | - | - |
Для чего используется?
Тег video позволяет загружать и воспроизводить видео-файлы на текущей веб-страничке. Расположение файла может быть указано двумя способами: Через атрибут src или тег source, который находится внутри video. Стоит отметить, что разные браузеры поддерживают разные кодеки. Поэтому, чтобы в любом браузере видео запустилось следует указывать несколько кодеков. Кодек указывается 1 раз в теге source, однако допускается использования нескольких таких тегов. Поддержка кодеков браузерами расписана в таблице ниже:
Браузер | |||||
Кодеки для аудио | |||||
ogg/vorbis | - | + | + | - | + |
wav | - | - | + | + | + |
mp3 | + | + | - | + | - |
AAC | + | + | - | + | - |
Кодеки для видео | |||||
ogg/theora | - | + | + | - | + |
H.264 | + | + | - | + | - |
WebM | - | + | + | - | + |
Как правильно задавать?
<video> <source src="URL"> </video>
Какие атрибуты поддерживаются?
- autoplay - запись начинает воспроизводится с того момента, как загрузка веб-странички завершится.
- controls - подключает инструменты управления записью.
- height - высота экрана проигрывателя видео.
- loop - зацикливает проигрывание файла (после окончания запись воспроизводится заново).
- poster - выводит картинку, которая будет показываться до тех пор, пока не загрузится видео.
- preload - видеофайл загружается вместе с веб-страничкой.
- src - задает адрес к записи.
- width - ширина экрана проигрывателя видео.
Закрытый тег
Да.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег video</title> </head> <body> <video width="400" height="300" controls="controls"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>. </video> </body> </html>
Тип html тега:
HTML5
Видео