Тег video
Тег video позволяет добавить видео на HTML страницу.
С его помощью также можно управлять этим видео.
Путь к файлу видео задается через
атрибут src или вложенный тег source.
Если вы хотите увидеть плейер для управления проигрыванием
видео - следует добавить атрибут controls.
Без него вы ничего не увидите - звука и изображения
при этом тоже не будет.
Иногда размещать видео на самом сайте не
очень удобно (к примеру, ваш хостинг имеет
ограничение по размеру сайта). В этом случае
видео можно залить на YouTube и подключить
с помощью тега iframe.
Атрибуты
| Атрибут | Описание |
|---|---|
src |
Указывает путь к видео файлу.
Но лучше для этого использовать тег source
(в этом случае можно будет задать видео в разных форматах).
|
preload |
Используется для загрузки видео файла одновременно с загрузкой страницы сайта.
Принимаемые значения: none (не загружать файл, по умолчанию),
metadata (загрузить только служебную информацию: продолжительность звучания и так далее),
auto (загрузить видео целиком при загрузке HTML страницы).
|
autoplay |
Звук начинает играть сразу после загрузки страницы,
при этом наличие атрибута preload будет проигнорировано.
Атрибут без значения. |
controls |
Добавляет панель управления к видео.
Атрибут без значения. По умолчанию (если атрибута нет) панель не добавляется. |
loop |
Повторяет аудиозапись по "кругу":
после завершения она начнет играть заново.
Атрибут без значения. По умолчанию (если атрибута нет) запись проиграется только 1 раз.
|
poster |
Путь к картинке, которая будет отображаться, пока видео не доступно или не вопроизводится.
Если атрибут poster не указан, браузер постарается отобразить первый кадр видео.
|
height |
Атрибут height задает высоту области воспроизведения видеоролика (в пикселях
или процентах).
Само видео меняет свои размеры в большую или меньшую сторону, подстраиваясь под заданную высоту,
но его пропорции при этом не меняются.
Значение по умолчанию: высота берется из параметров видео, если это значение не доступно, тогда значение атрибута height
считается равным высоте картинки из атрибута poster.
Если и poster не задан - высота
устанавливается в 150 пикселей.
|
width |
Атрибут width задает ширину области воспроизведения видеоролика (в пикселях
или процентах).
Само видео меняет свои размеры в большую или меньшую сторону, подстраиваясь под заданную ширину,
но его пропорции при этом не меняются.
Значение по умолчанию: ширина берется из параметров видео, если это значение не доступно, тогда значение атрибута width
считается равным ширине картинки из атрибута poster.
Если и poster не задан - ширина
устанавливается в 150 пикселей.
|
Пример . Плейер на странице сайта
Давайте добавим на страницу плейер с видео.
Для тех браузеров, которые не поддерживают
тег video оставлена специальная запись
об этом:
<video src="moovie.mp4" controls>
Ваш браузер не поддерживает video на HTML5.
</video>
Пример .
Давайте для тега video
добавим тег source:
<video>
<source src="moovie.mp4" controls>
Ваш браузер не поддерживает video на HTML5.
</video>
