Пользователь
0,0
рейтинг
4 апреля 2012 в 14:19

Разработка → oEmbed. Делаешь веб-сервис? — Делай и oEmbed



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

oEmbed.com — впринципе, на этом можно было бы и закончить читать тем, кто хочет провести самостоятельное мини-исследование.


Немного теории


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

Обмен информацией, с точки зрения oEmbed, происходит между поставщиком и потребителем. Потребитель желает показать встроенное представление стороннего ресурса на своем собственном сайте, например, это может быть фото с flickr или видео c youtube/vimeo. Поставщик реализует oEmbed API для обеспечения доставки этого контента потребителю.

Запрос пользователя — обычный GET запрос, должен включать url и несколько необязательных параметров, например максимальную ширину, высоту, формат (JSON, XML, etc.)
Например, чтобы заембедить видео с ютуба, мы его будем запрашивать следующим образом:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json


В ответе, который мы получим JSON, который содержит информацию о видео, а также embed-html.
{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"<object width=\"425\" height=\"344\">
			<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
			<param name=\"allowFullScreen\" value=\"true\"></param>
			<param name=\"allowscriptaccess\" value=\"always\"></param>
			<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
				type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
				allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
		</object>",
}


А ведь с таким же успехом мы могли получать API ключи, авторизоваться, делать запрос на поиск ролика, получать данные и самостоятельно формировать object и вставлять его.

Дальше больше. Первый же запрос в гугле о jquery-плагине привел меня на http://code.google.com/p/jquery-oembed/. Причем доступные примеры объясняют, как использовать плагин по полной. Написан он достаточно просто, и если случилось так, что вы не обнаружили там нужный вам ресурс, дописать его реализацию будет совсем не сложно.


Немного практики


На сайте Best Youtube Lyrics, который cделали ребята из Zengile, можно добавлять клипы с ютуба, дополняя их словами песен, или же например искать клип по словам песни. Т.е. главная бизнес-логическая штука — добавление видео. Я просто решил применить oEmbed, чтобы показывать видео, которое будет прикреплено.

В haml-вьюхе я дописал одну строчку с дивом, в котором будет отображаться видео
    = text_field_tag 'youtube', params[:youtube]  //- это обычный <input type="text" id="youtube">
    #oembed  //- это обычный <div id="oembed"></div>

В подключаемый js-файл дописал одну функцию. Вот и все:
$(document).ready( function() { 
    var yt = $("#youtube");
    var emb = $("#oembed");

    yt.focusout(function(){
    // когда пользователь переходит к другому полю,
        emb.oembed(yt.val(), {
    // мы берем значение из поля #youtube и начинаем embeding-делишки в #oembed
            embedMethod: "append",
            youtube: {maxWidth:500}
        });
    });
});
Вот такой вот результат:

Посмотреть как это работает и добавить свой клип и слова можно здесь.

Мораль


Вы потребитель: вы делаете какой-то социальный ресурс, так почему бы вам не позаботиться о ваших пользователях и не заставлять их копировать html-embed-код для того, чтобы их видео/фото опубликовалось на вашем ресурсе. Тем более что часто html-теги отсекаются, а вставлять iframe'ы пользователям не разрешается, мотивируя безопасностью.

Вы поставщик: вы создали ресурс, на котором есть интересный контент (какая-нибудь имедж-борда или просто ресурс-паразит поверх социальной сети, как instagram). Реализуйте у себя oembed API, и тогда вас будет проще интегрировать в другие сайты, количество обращений к вашему ресурсу увеличится. Инвестиционные деньги потекут рекой.

А вот список тех, кто уже реализовал у себя oEmbed API.


UPD Материал подготовлен для группы Code-n-coffee, которая проводит IT мероприятия в С-Пб. Цель этих встреч не только обменяться знаниями, но и познакомить разработчиков друг с другом, сформировать коммьюнити и developer culture. Мы хорошие. Это бесплатно. Присоединяйтесь.
Иван Шаматов @willson
карма
20,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

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

  • +1
    opengraph позволяет частично решить эту же проблему.
    • 0
      ну опенграф — есть суть то же самое, только собственная реализация Facebook. а oembed — вроде как открытый и общий формат
      • 0
        Да вроде тоже открытый.

        Вопрос только в том, кто умеет получать opengraph и oEmbed:)
      • 0
        Это не совсем то же самое — цель опенграфа — предоставить машинообрабатываемое семантическое описание страницы или обьекта описываемого на этой странице, является подмножеством RDFa. В то время как oEmbed служит лишь для создания удобного представления для конкретной ссылки и для включения этого представления в другие сайты.
        • +3
          меня Ваш ник вводит в ступор…
  • 0
    А какие из популярных сайтов являются oEmbed-потребителями?
    Как насчет Google+? Facebook? Вконтакте?
    На сайте oEmbed вменяемых примеров не нашел.
    • 0
      Ну было бы странно, если бы таковой список был. Ведь фейсбук или вконтакт не публикует список тех, кто использует их API.
      • +1
        Вообще-то, как раз странно, что такого списка нет.
        Какой смысл мне возиться с реализацией стандарта, если я не буду уверен, что ей кто-то вообще будет пользоваться?
        • +2
          Я думаю, история обратная. У меня есть сервис, я хочу позволить ембедить свой контент и горожу свое API.

          А теперь известно, что есть некий стандарт. И этого стандарта многие придерживают, почему бы не реализовать и у себя API, согласно этому стандарту.
          • 0
            Ембедить свой контент куда? В блог Василия Пупкина?

            Если этот стандарт не будет поддерживать хотя бы пара серьезных потребителей, то проку от него никакого не будет.
            • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Если бы проекты и функционал делался только при уверенности что это кто-то будет использовать… даже не знаю что было бы… Общем вопрос курицы и яйца…
    • 0
      Twitter является oEmbed-потребителем.
  • +5
    Ничего не сказано про авто-дисковери оэмбеда через <link rel="alternate" type="application/json+oembed">
    А это тема.
  • +1
    Если немного покопать эту тему, что я делал более года назад в рамках рабочего проекта, то существует ещё пара более развитых сервисов: oohembed.com (и embed.ly, которые были отдельным сервисом, а сейчас в июле 2011 купили первый домен и, видимо, разработчика). В отличие от менее 20 провайдеров контента, он поддержвает долее 200 провайдеров сейчас.

    www.oohembed.com/ = «oohEmbed is now part of the Embedly Family»

    embed.ly/ — Embedly provides a powerful API to convert standard URLs into embedded videos, images, and rich article previews from 218 leading providers.
    • 0
      В списке реализовавших этот сервис есть, но роль его совершенно другая. Он не поставляет свой контент в данном формате, а оформляет массу других сервисов в этот формат. Не требует пере-упоминания других oembed-поставщиков (типа vimeo и youtube). Минус, очевидно, кроется в вопросе: «А что будет, если он перестанет работать?». Да, для этого случая нужно иметь фронтендовый механизм подвязки всех этих 200 и более сервисов, который каждый сайт может поставить в виде виджета себе. Такого решения пока что не знаю. Отдельного провайдера-посредника тогда в принципе не нужно. А все oembed-поддерживающие просто быстрее и все разом подключатся в эту систему.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      > Единственно, что смущает — получение embed-html со стороны.
      Никто вас не заставляет им пользоваться. Получили название видео, превьюшку и ссылку на swf и можно самому сгенерировать embed код с нужными размерами и плеером.
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    У меня эта ссылка http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json почему-то возвращает это:
    {"provider_url": "http:\/\/www.youtube.com\/", "title": "Amazing Nintendo Facts", "html": "\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/M3r2XDceM6A?fs=1\u0026feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e", "author_name": "ZackScott", "height": 270, "thumbnail_width": 480, "width": 480, "version": "1.0", "author_url": "http:\/\/www.youtube.com\/user\/ZackScott", "provider_name": "YouTube", "thumbnail_url": "http:\/\/i2.ytimg.com\/vi\/M3r2XDceM6A\/hqdefault.jpg", "type": "video", "thumbnail_height": 360}
    

    • 0
      А не то что указано вами в посту.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Я тоже через iframe) как и контактовский видеоплеер.
    • 0
      Все почти так-же только еще и ссылка на картинку-превьюшку.
      • 0
        You just got «Discovery» badge.
        +100500 к внимательности.
  • 0
    Представим oEmbed в контексте социальной сети.
    Допустим, что фильтрации по белому списку нет, иначе нафига oEmbed.
    Юзер вставляет ссылку на свой сайт, который поддерживает oEmbed, в популярную группу.
    Скрипт отдаёт контакту зловредный код, который вставляет его в пост.
    В результате все юзеры, которые прочитали группу получают что-нибудь нехорошее, например угон кук, так как есть такой заголовок как request-control-allow-origin.
    Или какой-нибудь эксплоит.
    Или перевод голосов.
    • 0
      Допустим, что фильтрации по белому списку нет, иначе нафига oEmbed.

      Фильтрация поставщиков должна быть, конечно.

      Поэтому, конечно, просто реализовав у себя oEmbed, будучи малоизвестным ресурсом, вы вряд ли что-то сразу выгадаете. Но если в какой-то момент ваш интерес к интеграции с соцсетями станет взаимным — все стороны запросто смогут реализовать такое взаимодействие.
  • +1
    Кстати девушка-блондинка Leah Culver является со-автором OEmbed и еще и OAuth. Да и много всяких интересных проектов-стартапов делала типа Pownce, Convore, Grove и другие.
  • НЛО прилетело и опубликовало эту надпись здесь

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.