Хочу предложить твоему вниманию, %хабраюзер%, очередную вариацию на тему oEmbed+ (почему «плюс» см. ниже).
Для занятых и нетерпеливых сразу ссылка на сервис: oembed.info
А тех, кому важны детали, прошу под кат.
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).
{ "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, это совершенно бесплатно.
Как монетизировать сервис, я не придумал, но т.к. ресурсов он потребляет совсем немного, то пусть живет так. Хотя, если у кого-то будут мысли, типа «если б была такая фича, то я бы за нее заплатил», то буду благодарен, если их озвучите. Впрочем, буду благодарен за любые предложения по улучшению сервиса.
ссылка на оригинал статьи https://habrahabr.ru/post/278297/
Добавить комментарий