74. Видео в HTML5 - элемент VIDEO
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке научились вставлять аудио на HTML-страницу, указывать несколько форматов для различных браузеров и познакомились с атрибутами autoplay
, controls
и loop
. В этом уроке изучим тег <video>
.
Видео, в отличие от аудио, более распространено на веб-страницах. Flash был единственной нормальной технологией для воспроизведения видео, но HTML5 все поменял.
Элемент <video>
(именно он отвечает за отображение видео) очень похож на элемент <audio>
.
Примеры вставки видео на HTML-страницу
Теперь смотрим на пример, где показано, как добавить видео на HTML страницу при помощи элемента video
.
<video src = "video.mp4" controls width = "440" height = "240"></video>
Про атрибуты loop
, autoplay
, controls
подробнее читайте здесь.
Для видео, как и для аудио, лучше указывать несколько видео-форматов (разумеется, загрузить придется все форматы). Далее пример:
<video controls width = "440" height = "240" poster = "images.jpg">
<source src = "video.ogv" type = "video/ogg">
<source src = "video.mp4" type = "video/mp4">
</video>
В примере могли заметить атрибут poster
– заставка видео (пока видео не запущено), в котором указывается путь.
В контейнер <video>
можно поместить текст, ссылку или картинку на случай, если браузер пользователя не поддерживает встроенные видео:
<video controls width = "440" height = "240" poster = "images.jpg">
<source src = "video.ogv" type = "video/ogg">
<source src = "video.mp4" type = "video/mp4">
<p>
Здесь видео, но вы его не видите :(
Попробуйте скачать его по <a href = "video.mp4" download>ссылке</a>
</p>
</video>
Другие атрибуты тега <video>
Для тега <video>
доступны следующие атрибуты:
muted
- когда пользователь запустит видео, оно начнет воспроизводиться без звука;playsinline
- не позволяет открываться видео в полноэкранном режиме и оставляет его в рамках элемента;buffered
- хранит информацию о прогрессе загрузки видео;preload
- сообщает браузеру о необходимости загрузки видео и информации о нем сразу с загрузкой страницы. Может иметь следующие значения:none
- видео не будет загружаться предварительно;auto
- видео загружается вместе со страницей;metadata
- загружается только информация о видео.
В этом уроке научились встраивать видео с помощью тега <video>
и разобрались с его основными атрибутами. В следующем разделе поговорим об оставшихся HTML-тегах.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Добавьте путь к видео, которое добавлено на страницу. Путь этот:
/src/vidosiki/html.mp4
Например,<video src = "/src/course.avi"></video>
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.