Найти в Дзене

Как добавить видео на веб-страницу в HTML5?

Фото автора ThisIsEngineering Pexels
Фото автора ThisIsEngineering Pexels

Иногда лучше один раз увидеть, чем сто раз услышать. В случае с информационным или рекламным контентом на Вашем сайте это выражение может быть особенно актуально.

В HTML5 видео ролик можно добавить с помощью тега <video> и атрибутов src, poster, width, height.

ВАЖНО. Рекомендую сделать небольшую подготовку перед тем как добавлять видео на страницу: измените исходный формат видео на mp4 (форматы могут быть и другими, но этот я выбрал для примера). Это можно сделать с помощью онлайн-видео конвертера. В противном случае видео ролик воспроизводиться не будет.

Прописывание ссылок для видео (значение атрибута src) аналогично прописыванию ссылок для изображений.

То что вводим
То что вводим

То что получаем
То что получаем

Обратите внимание что практически все вышеперечисленные атрибуты находятся внутри открывающего тега <video>.

Несколько слов об оставшихся атрибутах:

  • preload - можно сказать что это инструкция, которая дается браузеру при загрузке страницы. Он может принимать одно из трех значений: none (загрузка ролика только после нажатия на воспроизведение), auto (загрузка ролика сразу после загрузки страницы), metadata (данные касающихся видео: первый кадр, длительность и т.д.);
  • controls - это своего рода запрос на то, чтобы браузер предоставил собственные элементы управления воспроизведением;
  • loop - автоматическое воспроизведение видеоролика.

Спасибо за внимание!

Если статья оказалась полезной предлагаю подписаться на канал. Впереди Вас ждет еще много интересного контента!)

P.S. Если возникли трудности пишите в комментариях или в сообщениях канала. Отвечу на все и всем)