Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Добавьте путь к видео, которое добавлено на страницу. Путь этот:
/src/vidosiki/html.mp4. Например,<video src = "/src/course.avi"></video>
В предыдущем уроке научились вставлять аудио на 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 по тегу HTML.
