Как сделать превью для видео на JavaScript
Разбираемся, как реализовать одну из самых важных функций любого видеохостинга.
vlada_maestro / shutterstock
Трудно найти видеохостинг, где нельзя увидеть примерное содержание ролика, не смотря его. Вы наводите курсор на превью, и на его месте появляется небольшой фрагмент самого видео. Вот как это выглядит на YouTube:
Давайте разберёмся, как сделать так же на своём сайте.
Подготовим всё необходимое
Для начала рекомендую прочесть нашу статью о создании плеера на HTML5 и JS.
Далее нам понадобится подготовить все файлы:
- Само видео. Я записал стартовый ролик из игры Metro: Last Light.
- Превью-ролик. Из видео я вырезал трёхсекундный фрагмент и уменьшил его разрешение до 640×360 пикселей. В итоге получился файл весом в 500 кб. Чем меньше превью, тем быстрее оно загрузится.
- Постер. Подойдёт любая картинка. В нашем случае — скриншот того же Metro.
Все исходники, включая эти файлы, можно найти в репозитории проекта на GitHub.
Сверстаем
Наш проект состоит из двух страниц:
- index.html. Здесь отображается список роликов на сайте.
- full.html. С помощью этого файла открывается плеер с полной версией видео, как только по нему был сделан клик.
Начнём с главной страницы. На ней просто добавим несколько раз один и тот же блок:
Весь блок — это область ссылки, при нажатии на которую откроется страница full.html. Внутри блока — превью и название ролика. В качестве превью мы указали элемент video со следующими параметрами:
- src — путь к файлу.
- poster — путь к изображению.
- loop — указатель на то, что ролик зациклен.
- class — класс.
- muted — говорим, что ролик должен воспроизводиться без звука. Для уменьшения размера файла звук можно вырезать вообще.
Теперь добавим стили:
Можно проверить, как выглядит страница в браузере:
Вёрстка для страницы с полной версией ещё проще:
Вот как выглядит плеер:
Теперь остаётся только подключить скрипт.
Напишем скрипт
Такого небольшого кода достаточно, чтобы всё работало. Остаётся только проверить. Обратите внимание, что ваш браузер может запретить сайту воспроизводить аудио или видео с помощью скриптов.
Разрешите автовоспроизведение и проверьте код:
Заключение
Главный минус такого способа создания превью — необходимость вырезать отдельный ролик. Впрочем, всё можно сделать автоматическим, но это уже задача для backend-разработчиков.