Как сделать превью для видео на JavaScript

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

vlada_maestro / shutterstock

Евгений Кучерявый

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

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

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

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

Подготовим всё необходимое

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

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

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

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

Сверстаем

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

index.html. Здесь отображается список роликов на сайте.
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();
}

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

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

Заключение

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

Читайте также: