01.03.2016 14:26
vshemarov 0 36 Источник


Хочу предложить твоему вниманию, %хабраюзер%, очередную вариацию на тему oEmbed+ (почему «плюс» см. ниже).

Для занятых и нетерпеливых сразу ссылка на сервис.

А тех, кому важны детали, прошу под кат.

oEmbed, Open Graph, Twitter Cards и все-все-все


Как-то понадобилось для одного сайта сделать так, чтоб по введенному URL можно было отобразить красивую картинку или вставить плеер, если это ссылка на видео. А еще лучше — даже для видео показать сначала статическую картинку, а уже по клику вставить вместо нее плеер. И, конечно же, в первую очередь приходит в голову использовать для этого oEmbed.

Что такое oEmbed, надеюсь, объяснять не нужно? Ну, если кто подзабыл, то oEmbed – это открытый формат для представления URL на стороннем сайте (как, например, делает это Фейсбук, когда в статусе указывается какой-то сайт). Для более подробной информации лучше почитать официальный сайт об этом формате: oembed.com

И немало сервис-провайдеров сегодня поддерживают этот формат: YouTube, Flickr, SlideShare и многие другие.

Но кроме oEmbed есть еще форматы микроразметки Open Graph и Twitter Cards, которые, фактически, служат ровно для тех же целей, что и oEmbed. И ресурсов, которые используют микроразметку для описания своих страниц многократно больше тех, что реализуют oEmbed.

А еще существует множество сайтов, которые вообще не заморачиваются ни oEmbed, ни микроразметкой, а живут, как умеют. Но по ним тоже хотелось бы получать возможную информацию.

Слишком много информации об URL не бывает


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

И такие сервисы, разумеется, существуют. Но в каждом из них мне чего-то не хватало для полного счастья. И вот так, как это нередко случается, родился новый сервис: oEmbed.info. Делал сначала сугубо для себя, но слегка увлекся и получился публичный сервис.

Этот сервис старается из полученного URL вытащить максимум информации, насколько это возможно – и через oEmbed, и через разметку, наконец, просто парсит HTML – и отдает ее аккуратным json'ом. В итоге, с одной стороны, получаем информацию в формате oEmbed, даже если ресурс не поддерживает этот формат. А с другой – объем получаемой информации, как правило, гораздо больше, чем это предусмотрено стандартом (кстати, именно поэтому в самом начале я говорю про "oEmbed+", а не просто oEmbed).

Что отдает oembed-сервис Youtube и что oEmbed.info - сравнение
Возвращаемые данные от oembed-сервиса Youtube:

{
  "type": "video",
  "thumbnail_url": "https://i.ytimg.com/vi/YR5ApYxkU-U/hqdefault.jpg",
  "thumbnail_width": 480,
  "html": "<iframe width=\"459\" height=\"344\" src=\"https://www.youtube.com/embed/YR5ApYxkU-U?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>",
  "version": "1.0",
  "width": 459,
  "author_url": "https://www.youtube.com/user/mongchilde",
  "provider_name": "YouTube",
  "thumbnail_height": 360,
  "height": 344,
  "author_name": "mongchilde",
  "provider_url": "https://www.youtube.com/",
  "title": "Pink Floyd - Another Brick In The Wall (HQ)"
}

Возвращаемые данные от oEmbed.Info:

{
  "version":"1.0",
  "url":"http://www.youtube.com/watch?v=YR5ApYxkU-U",
  "type":"video",
  "title":"Pink Floyd - Another Brick In The Wall (HQ)",
  "description":"HIT SUBSCRIBE FOR MORE CLASSIC VIDEOS Pink Floyd - Another Brick In The Wall Lifted from \"Pink Floyd The Wall\" film, this video is actually comprised of two ...",
  "cache_age":"",
  "tags":["Pink","Floyd","The","Wall","Another","Brick","In","Alan","Parker","Roger","Waters","David","Gilmour","Richard","Wright","Nick","Mason","Syd","Barrett","Cambridge","Kids","Children","Choir","Dark","Side","Of","Moon","We","Don't","Need","No","Education","Mask","Happiest","Days","Our","Lives","Alex","McAvoy","Childre..."],
  "width":459,
  "height":344,
  "author_name":"mongchilde",
  "author_url":"https://www.youtube.com/user/mongchilde",
  "html":"<iframe width=\"459\" height=\"344\" src=\"https://www.youtube.com/embed/YR5ApYxkU-U?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>",
  "player":"<iframe src=\"//www.youtube-nocookie.com/embed/YR5ApYxkU-U\" frameborder=\"0\" allowFullScreen width=\"459\" height=\"344\">",
  "aspect_ratio":74.946,
  "thumbnail_url":"https://i.ytimg.com/vi/YR5ApYxkU-U/hqdefault.jpg",
  "thumbnail_width":480,
  "thumbnail_height":360,
  "cover":"https://i.ytimg.com/vi/YR5ApYxkU-U/hqdefault.jpg",
  "cover_width":480,
  "cover_height":360,
  "provider_name":"YouTube",
  "provider_url":"https://www.youtube.com/",
  "provider_icons":[{"url":"https://www.youtube.com/favicon.ico","width":16,"height":16,"size":256,"mime":"image/x-icon","source":["adapter"]},{"url":"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico","width":16,"height":16,"size":256,"mime":"image/png","source":["html"]},{"url":"https://s.ytimg.com/yts/img/favicon_32-vfl8NGn4k.png","width":32,"height":32,"size":1024,"mime":"image/png","source":["html"]},{"url":"https://s.ytimg.com/yts/img/favicon_48-vfl1s0rGh.png","width":48,"height":48,"size":2304,"mime":"image/png","source":["html"]},{"url":"https://s.ytimg.com/yts/img/favicon_96-vfldSA3ca.png","width":96,"height":96,"size":9216,"mime":"image/png","source":["html"]},{"url":"https://s.ytimg.com/yts/img/favicon_144-vflWmzoXw.png","width":144,"height":144,"size":20736,"mime":"image/png","source":["html"]}],
  "published_time":"",
  "images":[{"url":"https://i.ytimg.com/vi/YR5ApYxkU-U/hqdefault.jpg","width":480,"height":360,"size":172800,"mime":"image/jpeg","source":["oembed","opengraph","twittercards"]}],
  "maxres":{"url":"https://i.ytimg.com/vi/YR5ApYxkU-U/hqdefault.jpg","width":480,"height":360,"size":172800,"mime":"image/jpeg","source":["oembed","opengraph","twittercards"]}
}



Информацию по URL можно получить вручную, а можно через API. Чтоб работать через API нужно получить API KEY, это совершенно бесплатно.

Как монетизировать сервис, я не придумал, но т.к. ресурсов он потребляет совсем немного, то пусть живет так. Хотя, если у кого-то будут мысли, типа «если б была такая фича, то я бы за нее заплатил», то буду благодарен, если их озвучите. Впрочем, буду благодарен за любые предложения по улучшению сервиса.

Комментарии (0)