До недавнего времени вопрос как вставить видео в html код сайта доставлял неподготовленному вебмастеру некоторые проблемы. Зачастую ролики воспроизводились с помощью сторонних скриптов, например, самые популярные решения были реализованы на технологии Флеш. Однако флеш себя несколько дискредитировал в плане безопасности. Поэтому для унификации возможности вставки (размещения) видео в HTML код различные веб-платформ в новейшую версию кода языка HTML 5 был внедрен тег <video> ⤵️ :
<video> <source src="URL"> </video>
<source src="URL"> - тег, в который вместо URL вписывается адрес Вашего видео, например ⤵️:
<source src="/uploads/files/2020-04/1587393155_preview-video-podpishis-i-postav-lajk-na-prozrachnom-fone.mp4" type="video/mp4">
Самые необходимые атрибуты для вставки видео в html код сайта
- Autoplay - Воспроизводиться автоматически после загрузки страницы.
- Controls - Добавляет панель управления к видеоролику.
- Height - Задает высоту области для воспроизведения видеоролика.
- Loop - Повторяет воспроизведение видео с начала после его завершения.
- Poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
- Preload - Используется для загрузки видео вместе с загрузкой веб-страницы.
- Width - Задает ширину области для воспроизведения видеоролика.
Наиболее полный вид html кода для вставки на страницу сайта ⤵️
<video width="500" height="400" controls="controls" autoplay loop="loop" poster="video/duel.jpg"> <source src="video/jane.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/jane.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/jane.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером.<a href="video/duel.mp4">Скачайте видео</a>.
</video>
Итак, видео будет воспроизводится автоматически (Autoplay) сразу после загрузки, с панелью управления (Controls) и картинкой-заставкой (Poster), так же будет доступна бесконечное проигрывание ролика (Loop) и скачивание видео (правая кнопка мыши-> сохранить как...)
Самую полную информацию о теге <video> вы получите на этой странице🔗.
