Код
Код
#Руководства
  • 1125

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

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

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

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

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

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

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


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

Для начала рекомендую прочесть нашу статью о создании плеера на 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-разработчиков.

Если вам нравится создавать интерактивные элементы, наводить порядок в интерфейсах и делать их удобными, то вы можете записаться на наш курс по frontend-разработке, чтобы в полной мере освоить HTML, CSS, JavaScript и популярные фреймворки.

Курс

Frontend-разработчик


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

Понравилась статья?
Да