Создание анимированных эскизов (превью)
Поиск

Создание анимированных эскизов (превью)

Nikel, 01.05.2019

В настоящее время скорость загрузки не является уже такой  проблемой для веб-разработчиков как это было лет десять назад. Конечно, небольшие размеры файлов по-прежнему желательны, но реальная производительность на большинстве сайтов зависит от количества HTTP-запросов. Каждый раз, когда ваш сайт загружает ресурс, браузер делает HTTP-запрос, который отправляется, обрабатывается и возвращается. И большая часть задержек на сайте  тратится именно на ожидание ответа сервера и не связана с размером файла. Поэтому количество HTTP-запросов стремятся минимизировать.

Если вы интересовались ранее версткой,html то, скорее всего знаете, что такое спрайты. Эта технология объединения различных иконок или различных состояний иконок существует уже не один год. Давайте вспомним, как работают CSS спрайты.
Несколько изображений объединяются в один файл, а затем различные части этого изображения выборочно отображаются с помощью CSS.

Традиционно для любой кнопки  существуют три состояния: по умолчанию, при наведении и при нажатии. Для каждого из них существует своя картинка. Поэтому, если не использовать спрайты, это приведет к загрузке с сервера трех изображений и генерированию трех HTTP-запросов, что само по себе не очень хорошо.

Когда мы делаем  CSS-спрайт, мы сохраняем все три изображения рядом друг с другом в одном файле (так что вместо трех изображений шириной 200 пикселей у нас есть одно изображение шириной 600 пикселей).

А получаем из этого общего изображения нужное нам, меняя положение с помощью свойства фона CSS background-position:

Чтобы понять как все это работает, можно представить окно, через которое можно просмотреть изображение,  при этом изображение перемещается,  а окно остается в том же положении.

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

Однако используя данный метод можно создавать и принципиально новые вещи. Вот мы и подошли к новой интересной возможности, которую можно получить — созданию анимированных миниатюр(превью), отображающих некоторые кадры из видео.

Создание анимированного эскиза

Ограничение техники CSS sprite выше-это небольшое количество состояний, которые мы можем использовать.  Однако, подключив  jQuery, мы можем использовать положение курсора, чтобы определить столько состояний, сколько нам нравится, или, точнее, столько разных позиций курсора, сколько мы может быть на экране:

В качестве видео я выбрала стандартный образец видео из Windows7. Перемещая курсор вдоль изображения мы получаем эффект анимации.

Первое, что нужно сделать — это объединить вместе несколько изображений.  Нам потребуется 6 ключевых кадров из видео, для которого требуется создать превью. Их можно получить и сшить вместе с помощью специальных программ работы с видео.
Когда изображение готово,  нам нужно создать простой HTML со ссылкой на видео, для которого мы создаем эскиз:

Затем нам нужно добавить jQuery в начало страницы, раздел head:

Мы используем jQuery для установки типа отображения (блочный),  ширины (300px, что соответствует ширине одного «кадра» изображения), высоты (170px) и фона вышеприведенной ссылки:

Теперь нам требуется установить такое положение фона, чтобы отображалась нужная часть изображения изображения; каждый «кадр» имеет ширину 300 пикселей, поэтому, чтобы показать первый кадр, положение по горизонтали фонового изображения должно быть 0 px, чтобы показать второй-300 px, третий-600 px и т. д.

Используя функцию обработчика mousemove, мы можем вычислить относительное положение курсора над элементом в процентах.

После этого вычисляется положение фонового изображения путем умножения процентного положения курсора на общий размер составного изображения. Нам нужно, чтобы конечный результат был кратен ширине элемента (300px), поэтому мы делим результат на это значение, округляя его с помощью математики.floor(), затем умножаем опять, чтобы отменить деление.

Затем мы применяем фоновую позицию с помощью CSS:

Добавляем дополнительные стили для названия, чтобы оно лучше выглядело

Полный код будет выглядеть так:

Демонстрационный пример

Вот мы и получили нашу миниатюру к видео.Но есть несколько вещей, которые следует учитывать: во-первых, не стоит гнаться за большим количеством кадров, так как это займет много времени для загрузки, несмотря на очень плавную анимацию; во-вторых, этот метод не будет работать на сенсорном устройстве, так как там не действует обнаружение положения мыши (хотя и не вредит удобству использования на мобильном устройстве).

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