Как сделать превью для видео на JavaScript
2026-02-21 07:23 Diff
https://skillbox.ru/media/code/kak_sdelat_prevyu_dlya_video_na_javascript/

#Руководства

  • 8 сен 2020
  • 0

Разбираемся, как реализовать одну из самых важных функций любого видеохостинга.

 vlada_maestro / shutterstock

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Трудно найти видеохостинг, где нельзя увидеть примерное содержание ролика, не смотря его. Вы наводите курсор на превью, и на его месте появляется небольшой фрагмент самого видео. Вот как это выглядит на YouTube:

Трэш из трендов YouTube. Не для слабонервных

Давайте разберёмся, как сделать так же на своём сайте.

Для начала рекомендую прочесть нашу статью о создании плеера на HTML5 и JS.

Далее нам понадобится подготовить все файлы:

  • Само видео. Я записал стартовый ролик из игры Metro: Last Light.
  • Превью-ролик. Из видео я вырезал трёхсекундный фрагмент и уменьшил его разрешение до 640×360 пикселей. В итоге получился файл весом в 500 кб. Чем меньше превью, тем быстрее оно загрузится.
  • Постер. Подойдёт любая картинка. В нашем случае — скриншот того же Metro.

Все исходники, включая эти файлы, можно найти в репозитории проекта на GitHub.

Наш проект состоит из двух страниц:

  1. index.html. Здесь отображается список роликов на сайте.
  2. full.html. С помощью этого файла открывается плеер с полной версией видео, как только по нему был сделан клик.

Начнём с главной страницы. На ней просто добавим несколько раз один и тот же блок:

<a href="full.html" class="item"> <div class="item__content"> <video src="videos/metro1_thumb.mp4" poster="images/metro1_thumb.jpg" loop class="item__thumb" muted></video> <div class="item__text">Metro: Last Light</div> </div> </a>

Весь блок — это область ссылки, при нажатии на которую откроется страница full.html. Внутри блока — превью и название ролика. В качестве превью мы указали элемент video со следующими параметрами:

  • src — путь к файлу.
  • poster — путь к изображению.
  • loop — указатель на то, что ролик зациклен.
  • class — класс.
  • muted — говорим, что ролик должен воспроизводиться без звука. Для уменьшения размера файла звук можно вырезать вообще.

Теперь добавим стили:

.item { color: #111; display: inline-block; vertical-align: top; } .item__content { padding: 5px; } .item__thumb { width: 350px; } .item__text { font-size: 16pt; } .item:hover { text-decoration: none; }

Можно проверить, как выглядит страница в браузере:

Вёрстка для страницы с полной версией ещё проще:

<div> <video src="videos/metro1.mp4" poster="images/metro1_thumb.jpg" controls class="video"></video> <div class="item__text">Metro: Last Light</div> </div>

Вот как выглядит плеер:

Теперь остаётся только подключить скрипт.

//Создаём переменную, где будут находиться наши превью let videos; //Запускаем функцию, которая найдёт все видео на странице и добавит обработчики событий Init(); function Init() { //Получаем видео videos = document.getElementsByClassName("item__thumb"); for(var i = 0; i < videos.length; i++) { //Добавляем обработчик события наведения мыши videos[i].addEventListener("mouseenter", function(e) { MouseEnter(e.target); }); //Добавляем обработчик события выхода курсора за границы элемента videos[i].addEventListener("mouseleave", function(e) { MouseLeave(e.target); }); } } //Если мышь наведена, просто запускаем ролик function MouseEnter(e) { e.play(); } //Если курсор выходит за пределы элемента, то мы сначала ставим видео на паузу //А потом перезагружаем его, чтобы отобразился постер function MouseLeave(e) { e.pause(); e.load(); }

Такого небольшого кода достаточно, чтобы всё работало. Остаётся только проверить. Обратите внимание, что ваш браузер может запретить сайту воспроизводить аудио или видео с помощью скриптов.

Пример из браузера Mozilla Firefox

Разрешите автовоспроизведение и проверьте код:

Главный минус такого способа создания превью — необходимость вырезать отдельный ролик. Впрочем, всё можно сделать автоматическим, но это уже задача для backend-разработчиков.

Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше