Как получить миниатюры видео с Vimeo: практическое решение

Быстрый ответ

Для того чтобы получить миниатюры с Vimeo, воспользуйтесь следующим URL: https://vimeo.com/api/v2/video/{video_id}.json, где {video_id} — идентификатор интересующего вас видео. В ответе в формате JSON найти ссылку на миниатюру нужного размера.

fetch('https://vimeo.com/api/v2/video/{video_id}.json')
  .then(res => res.json())
  .then(data => console.log(data[0].thumbnail_large)) // выводим ссылку на крупное изображение
  .catch(console.error); // в случае ошибки отображаем её в консоли

Разбор ответа API

Ответ, который вам пришлёт Vimeo Simple API, может быть представлен в форматах JSON, PHP и XML. Ответ будет содержать миниатюры разных размеров: маленькие, средние или большие. Выбирайте размер изображения в зависимости от ваших потребностей.

Для PHP запрос будет выглядеть таким образом:

$json = file_get_contents('https://vimeo.com/api/v2/video/{video_id}.json'); // отправляем запрос
$data = json_decode($json, true); // обрабатываем JSON-ответ
$thumbnail_url = $data[0]['thumbnail_medium']; // получаем URL среднего изображения

Для работы с XML извлеките соответствующие элементы из ответа API, но помните о популярности и удобстве работы с JSON.

Визуализация

Вот наглядный пример того, как проходит процесс извлечения миниатюр с Vimeo. Можно представить его как погружение в морские глубины данных:

# Мир Vimeo 🌊

Миссия поиска (API запрос) ➡️ [Варианты миниатюр]

И поиск выполняется так:

<img src="https://i.vimeocdn.com/video/{thumbnail_id}_{size}.jpg">

А возвращаете вы "подводные" изображения различных размеров 🐠:

Размеры    | Миниатюра
-----------|-----------------
Маленький  | 🐠 (150x150)
Средний    | 🐟 (320x320)
Большой    | 🐡 (640x640)

Каждый параметр size возвращает миниатюру соответствующего размера из библиотеки Vimeo. 🎣

Альтернативные стратегии и специфика

Использование jQuery

Обратитесь к jQuery для упрощения процедуры получения миниатюр:

$.getJSON('https://vimeo.com/api/v2/video/{video_id}.json', function(data) {
  $("img").attr("src", data[0].thumbnail_large); // получаем крупное изображение
});

Подробнее об этом расскажет наш спикер на видео

Повышение скорости с vumbnail.com

vumbnail.com предоставляет кэшированные миниатюры Vimeo для быстрого получения миниатюр:

<img src="https://vumbnail.com/{video_id}_medium.jpg">

На vumbnail.com миниатюры хранятся в течение 28 дней, что обеспечивает более быструю загрузку.

Создайте свой сервер для миниатюр

На GitHub вы можете найти репозитории, позволяющие настроить собственный сервер для миниатюр.

Преодоление препятствий

Будьте готовы к потенциальным проблемам при работе с API, например, сбоям в сети или неожиданным ответам сервера. Вам необходима надёжная обработка ошибок.

Полезные материалы

1. Vimeo — Руководство по API — Официальное руководство для работы с миниатюрами.
2. Свежие вопросы о 'vimeo-api' на Stack Overflow — Обсуждение API Vimeo.
3. Введение в API Vimeo — Пособие для начинающих.
4. Введение в JSON — Работа с JSON в JavaScript.
5. Документация по curl — Взаимодействие с API с использованием curl.
6. jQuery.getJSON() — Пособие по Ajax JSON запросам в jQuery.
7. Использование тега <img> для встраивания изображений — Встраивание миниатюр в HTML.