Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

74. Видео в HTML5 - элемент VIDEO

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке научились вставлять аудио на HTML-страницу, указывать несколько форматов для различных браузеров и познакомились с атрибутами autoplay, controls и loop. В этом уроке изучим тег <video>.

Видео, в отличие от аудио, более распространено на веб-страницах. Flash был единственной нормальной технологией для воспроизведения видео, но HTML5 все поменял.

Элемент <video> (именно он отвечает за отображение видео) очень похож на элемент <audio>.

Примеры вставки видео на HTML-страницу

Теперь смотрим на пример, где показано, как добавить видео на HTML страницу при помощи элемента video.

Пример (html)
<video src = "video.mp4" controls width = "440" height = "240"></video> 

Про атрибуты loopautoplaycontrols подробнее читайте здесь.

Для видео, как и для аудио, лучше указывать несколько видео-форматов (разумеется, загрузить придется все форматы). Далее пример:

Пример (html)
<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> можно поместить текст, ссылку или картинку на случай, если браузер пользователя не поддерживает встроенные видео:

Пример (html)
<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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Звук в HTML5 - элемент AUDIOHTML5
Единицы измерения длины в CSSЕдиницы измерения
Позиционирование элементов свойством positionПозиционирование
Структура документа: родитель-потомок в CSSСелекторы в CSS
Итоги раздела «Итераторы в Python»Знакомство с Python
Селекторы атрибутов: по частичному значениюСелекторы в CSS
Добавляем градиент к фону элементаЦвета и фон
Селекторы атрибутов: простой выборСелекторы в CSS
Селекторы идентификаторов (id селекторы)Селекторы в CSS
Раздел «HTML5»
69. УРОК: 1. Знакомство с HTML5
70. УРОК: 2. Семантические и структурные теги в HTML5
71. УРОК: 3. Еще отличия HTML5 от HTML4
72. УРОК: 4. Создание холста в HTML5 с помощью тега CANVAS
73. УРОК: 5. Звук в HTML5 - элемент AUDIO
УРОК 74. 6. Видео в HTML5 - элемент VIDEO
Вы здесь
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно