Видеохостинг Vimeo является вторым по популярности после YouTube, и широкая известность вполне объяснима – сервис предоставляет хорошие возможности для популяризации своего видео, давая пользователям средства для легкого распространения видео в социальных сетях, голосования за понравившиеся ролики, коды для интеграции в любую страницу сайта. Кстати, хочу отметить, что качество воспроизведения видео в Vimeo лучше, чем в YouTube. Для каждого ролика сервис создает несколько скриншотов. Мне понадобилось не просто вставлять видео из Vimeo в блог, но и делать это в виде миниатюры, а не внедренного объекта. Такой подход иногда бывает удобнее традиционного – миниатюру можно использовать в анонсах, можно поверх нее выводить определенный текст, миниатюры, в отличие от вставленного видео, попадают в RSS, да и блог с картинками грузится быстрее, чем блог с видео. Изучив этот вопрос, я сделал шорткод, который выводит миниатюру видео из Vimeo, которая является ссылкой-картинкой, ведущей на страницу с видео.
Сначала нужно получить прямую ссылку на миниатюру. В Vimeo не все так просто, как в YouTube, и чтобы получить миниатюру, нужно расковырять конфигурационный файл, соответствующий ID ролика, и извлечь из него необходимые данные. Для этого я создал в файле functions.php специальную функцию (помог мне в этом вот этот материал), возвращающую ссылку на миниатюру, используя ID ролика.
function getVimeoInfoThumb($id, $info = 'thumbnail_large') {
if (!function_exists('curl_init')) die('CURL не установлен!');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$output = unserialize(curl_exec($ch));
$output = $output[0][$info];
curl_close($ch);
return $output;
} Функция возвращает ссылку на миниатюру хорошего качества – thumbnail_large, которая обычно по ширине где-то 480 точек, но можно использовать и меньшие варианты – thumbnail_medium и thumbnail_small. Теперь осталось воспользоваться этой функцией, и сделать ссылку-картинку, которую можно вывести в посте с помощью шорткода. Для этого нужно вставить в файл functions.php следующий код:
function wp_vimeo_video_thumbnail($atts) {
extract(shortcode_atts(array(
'id' => ''
), $atts));
return '
<div class="vm-main-div">
</div>
';
}
add_shortcode('vm', 'wp_vimeo_video_thumbnail'); Этот шорткод выводит миниатюру видео из Vimeo, делая ее ссылкой на ролик. Чтобы придать этой миниатюре индивидуальный вид, можно добавить в файл style.css используемой вами темы оформление:
.vm-main-div {...} /* оформление всего элемента, включающего в себя ссылку-картинку */
.vm-link {...} /* оформление для ссылки-картинки - можно добавить или убрать подчеркивание, рамку */
.vm-main-div-img {...} /* оформление картинки - можно добавить отступы, рамку, прозрачность */
Шорткод используется так:
[vm id="ID"]
ID – это ID ролика, который можно узнать из его адреса.
В код я добавил rel=”lightbox[vimeo]”. Есть плагины, которые открывают видео в отдельном модальном окне, не переходя на страницу с видео (например, Orange Box) – эта добавка специально для них. Если же она мешает, то lightbox[vimeo] из rel можно убрать (или заменить rel=”lightbox[vimeo]” на class=”lightbox”).
Пользуйтесь!
Возможно вам так же будет интересно узнать, как сделать аналогичный шорткод для вставки миниатюры видео из YouTube: Шорткод для вставки миниатюры видео из YouTube.
