В большинстве случаев лучший вариант — загрузить и встроить видео из Ютуба (помянем), ВК, Вимео или другого видеохостинга. Так вы не заморачиваетесь с хранением, оптимизацией и доставкой видеофайлов в браузер читателя, плюс получаете современный видеоплеер со всеми нужными функциями, вроде запоминания позиции или субтитров.
Но главная фишка видеохостингов — потоковое воспроизведение. Читателю не обязательно качать видео целиком, чтобы посмотреть минутный фрагмент в конце часовой лекции. Обеспечить такое самостоятельно, без видеохостинга, — непростая задача даже для опытного разработчика.
Очевидный минус — ваши видео обслуживаются третьими лицами. Со всеми вытекающими: от рекламы в видео до блокировок. Будьте готовы, что в любой момент хостинг придётся менять и обязательно храните оригиналы видеофайлов в надёжном месте на чёрный день.
Встраивание видео из видеохостинга на примере ВК
На странице видео жмём «Поделиться» → «Экспортировать» → «Код для вставки», вставляем код в нужное место страницы. Готово:
<!-- Тег iframe встраивает на сайт кусочек другого сайта. В нашем случае — плеер ВК -->
<iframe src="https://vk.com/video_ext.php?oid=-177304549&id=456239878&hd=2&autoplay=1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>
Плеер настраивают, меняя код. Это делается по‑разному у разных видеохостингов, подробности несложно найти в интернете. Повлиять на вид плеера из ЦСС нельзя, но можно изменить размеры и позиционировать сам айфрейм так же, как любой другой элемент.
Стандартный тег video
Другой вариант — подключить видео с собственного сервера. Для этого используют тег video. В базовом виде он похож на тег img для картинок — просто укажите в src путь до видеофайла и на странице появится плеер:
<!-- Обязательно оптимизируйте видеофайл, чтобы он загружался как можно быстрее -->
<video src="./myvideo.mp4" controls></video>
video {
display: block;
width: 100%;
aspect-ratio: 16/13;
object-fit: cover;
}Тег video плохо подходит для тяжёлых и длинных видео — в нём нет потокового воспроизведения и читателю придётся качать файл целиком. А стандартному плееру не хватает многих полезных функций.
Обычно video используют только для совсем крошечных видео. Например, для фоновых. Плеер позиционируют так же, как любой другой элемент:
<!-- Атрибут autoplay автоматически включает видео, loop — зацикливает. Автоплей работает только с видео без звука или в паре с атрибутом muted. Чтобы спрятать интерфейс плеера, не добавляем атрибут controls -->
<div class="hero">
<video class="hero__video" src="./video.mp4"
autoplay muted loop>
</video>
<div class="hero__text">
<h1>Рикрол — полная история легендарного мема</h1>
</div>
</div>
.hero {
position: relative;
aspect-ratio: 16/13;
}
.hero__video {
z-index: 1;
position: absolute;
pointer-events: none; /* Запрещаем клики */
/* Вписываем элемент в размеры родителя */
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.hero__text {
position: absolute;
z-index: 2;
left: 18px;
bottom: 18px;
}
video. МДН
Тег video, конечно, можно прокачать разными атрибутами и дополнительными настройками, но он не станет принципиально лучше без серьёзного дополнительного программирования.
video. МДН
Собственная разработка
Если способы выше не подходят — остаётся создание собственного плеера. Это непросто, зато получится инструмент конкретно под ваши нужды.
В современном вебе есть технологии для программирования плеера на основе тега video, а также много готовых сторонних решений, работающих плюс-минус «из коробки».
Имейте в виду, что кроме разработки клиентской части и самого плеера, обычно требуется и дополнительная настройка сервера для продвинутой работы с видеофайлами, оптимизации их хранения и доставки в браузер читателя.
См. также:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.