Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>8 сен 2020</li>

3 <li>0</li>

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

5 vlada_maestro / shutterstock

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

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

8 Трэш из трендов YouTube. Не для слабонервныхДавайте разберёмся, как сделать так же на своём сайте.

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

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

11 <ul><li>Само видео.Я записал стартовый ролик из игры Metro: Last Light.</li>

12 <li>Превью-ролик.Из видео я вырезал трёхсекундный фрагмент и уменьшил его разрешение до 640×360 пикселей. В итоге получился файл весом в 500 кб. Чем меньше превью, тем быстрее оно загрузится.</li>

13 <li>Постер.Подойдёт любая картинка. В нашем случае - скриншот того же Metro.</li>

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

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

16 <ol><li>index.html.Здесь отображается список роликов на сайте.</li>

17 <li>full.html.С помощью этого файла открывается плеер с полной версией видео, как только по нему был сделан клик.</li>

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

19 <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со следующими параметрами:

20 <ul><li>src - путь к файлу.</li>

21 <li>poster - путь к изображению.</li>

22 <li>loop - указатель на то, что ролик зациклен.</li>

23 <li>class - класс.</li>

24 <li>muted - говорим, что ролик должен воспроизводиться без звука. Для уменьшения размера файла звук можно вырезать вообще.</li>

25 </ul>Теперь добавим стили:

26 .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; }Можно проверить, как выглядит страница в браузере:

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

28 <div> <video src="videos/metro1.mp4" poster="images/metro1_thumb.jpg" controls class="video"></video> <div class="item__text">Metro: Last Light</div> </div>Вот как выглядит плеер:

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

30 //Создаём переменную, где будут находиться наши превью 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(); }Такого небольшого кода достаточно, чтобы всё работало. Остаётся только проверить. Обратите внимание, что ваш браузер может запретить сайту воспроизводить аудио или видео с помощью скриптов.

31 Пример из браузера Mozilla FirefoxРазрешите автовоспроизведение и проверьте код:

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

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