Java, UX, HTML, CSS, WEB-design

Программное обнаружение общего кода с помощью oEmbed

[ad_1]

  • Дрю Маклеллан

  • 0 Комментарии

Программное обнаружение общего кода с помощью oEmbed

  • 9 минут чтения

  • API, Медиа

Краткое резюме ↬

На многих сайтах размещены медиафайлы и контент, которым можно поделиться в другом месте с помощью кода для встраивания HTML. Что произойдет, если у вас есть только URL-адрес элемента и вам нужно найти встраиваемую версию носителя без вмешательства человека? Вот тут и приходит на помощь oEmbed.

Интернет полон сервисов, которые размещают разнообразный контент, такой как видео, изображения, музыку и подкасты, карты и графики, а также всевозможные другие прелести. Скорее всего, когда вы добавляете свой контент на сайт, он предложит вам способ встроить этот контент на веб-страницу в другом месте.

Такие сайты, как YouTube, имеют собственный встраиваемый проигрыватель, который популярно использовать в сообщениях в блогах и даже на страницах продуктов. У Soundcloud есть код для встраивания музыкального проигрывателя на сайт вашей группы. Благотворительные сборщики средств могут загрузить маршрут своей большой гонки на такой сайт, как Strava, и захотеть поделиться им на своем сайте по сбору средств, чтобы показать своих спонсоров.

Все это делается путем обнаружения того, что доля вариант на хостинговом сайте и копирование некоторого кода, который обычно представляет собой смесь HTML и JavaScript. Затем этот код обычно можно вставить на целевую страницу, и хостинг-сайт предоставит богатое представление контента для всех ваших друзей, клиентов и контактов.

Пока все хорошо, и это довольно хорошо покрывает возможность ручного встраивания контента. Однако существует другой вариант использования, в котором результат тот же, но путь к нему сильно отличается.

Еще после прыжка! Продолжить чтение ниже ↓

Совместное использование программно

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

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

Check out this video! https://youtu.be/jw7bRnFbwAI

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

Второй вариант — превратить его в ссылку. Это хороший следующий шаг, так как пользователи могут перейти по ссылке и перейти к содержимому. Но при этом они покидают ваш сайт и могут не вернуться в спешке.

Лучшим взаимодействием с пользователем может быть возможность получить проигрыватель для этого контента и встроить его прямо туда, а не только по URL-адресу. Это позволит пользователям просматривать контент прямо на вашем сайте, как, например, на Facebook.

Это создает проблему. Учитывая URL-адрес, как я могу превратить его в код для встраивания HTML/JavaScript, необходимый для отображения расширенного проигрывателя на странице?

Если это известный сайт, такой как YouTube, я мог бы написать некоторый код, который использует API YouTube для извлечения информации о видео и получения или создания кода для встраивания таким образом. Я мог бы сделать то же самое для других видеосервисов, таких как Vimeo и VIVO. Я могу написать код для распознавания URL-адресов Flickr и Instagram и использовать их API для извлечения красивых версий фотографий для встраивания. И то же самое для Твиттера и твитов. Но это звучит как много работы!

Было бы идеально, если бы существовал стандартизированный способ перехода от URL-адреса фрагмента контента к блоку кода встраивания для отображения этого контента на странице. Если вы были внимательны, то поймете, что ответ на этот вопрос — oEmbed.

Происхождение oEmbed

Это была именно та проблема, с которой столкнулась Лия Калвер во время работы над Pownce (действительно инновационной социальной сетью, которая была Betamax для VHS Twitter). Паунс хотел внедрить расширенные представления контента в пользовательский поток обновлений, но не хотел ограничивать поддержку только службами, для интеграции с которыми был специально написан код. За ужином с коллегой Майком Мэлоуном, а также с Кэлом Хендерсоном (который руководил разработкой в ​​Flickr — одном из крупнейших поставщиков такого контента в то время) и Ричардом Кроули они вместе обсудили идею открытого стандарта для получения кода для встраивания из URL. Хендерсон ушел и набросал что-то на основе обсуждения, так родился oEmbed.

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

Вот как это работает.

Он начинается с URL-адреса, который указывает на один элемент контента. Это может быть видео на YouTube, изображение или что-то еще. Обычно это предоставляется пользователем вашего сайта или приложения как часть контента, который он хочет опубликовать. Первым шагом является получение содержимого страницы по этому URL-адресу, который должен быть HTML-страницей.

Если сайт, на котором размещается контент, поддерживает oEmbed, в <head> раздел этой страницы должен быть link элемент с oembed Тип содержимого:

<link rel="alternate" type="application/json+oembed"
  href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json"
  title="Inclusive Components with Heydon Pickering" />

Примечание об XML: oEmbed поддерживает ответы как в формате XML, так и в формате JSON. В этой статье я рассматриваю только JSON, потому что мы не дикари. Если вам не повезло работать с XML, имейте в виду, что этот формат поддерживается спецификацией oEmbed, хотя вы можете обнаружить, что некоторые провайдеры предлагают только ответы JSON.

Этот тег ссылки как rel атрибут установлен на alternate и type установить либо application/json+oembed или text/xml+oembed. Именно этот атрибут подсказывает нам, что URL-адрес, указанный в href на самом деле является конечной точкой oEmbed API для получения сведений о содержимом.

Этот URL обычно имеет два параметра: url и format.

Параметр Ценность
url (обязательный) URL-кодированный веб-адрес элемента контента
format Формат, в котором вы хотите получить ответ. Один из следующих вариантов: json или xml

Общие параметры URL для первоначального потребительского запроса

Полная спецификация здесь представлена ​​более подробно (и вы должны ссылаться на нее при создании собственной реализации), но это два параметра, которые вы, скорее всего, увидите чаще всего.

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

{
        "author_name": "Smashing Magazine",
        "width": 480,
        "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)",
        "provider_name": "YouTube",
        "height": 270,
        "html": "<iframe width="480" height="270" src="https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>",
        "provider_url": "https://www.youtube.com/",
        "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg",
        "type": "video",
        "thumbnail_height": 360,
        "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ",
        "version": "1.0",
        "thumbnail_width": 480
}

Сейчас мы говорим! Ответ дает нам много информации о содержании. То version должно в обозримом будущем быть 1.0, которая является текущей версией спецификации oEmbed. Другая возвращаемая информация во многом зависит от значения type.

Типы ответов

Значение type Ключ в ответе говорит вам, какой носитель вы собираетесь встраивать.

Значение type Что ожидать
photo Статическая фотография, которая предлагает url, width и height который можно использовать для основного img тег
video Видеоплеер с html указание кода, необходимого для встраивания проигрывателя на страницу, хотя и с width и height
link В конце концов, лучший способ справиться с этим контентом — просто предоставить ссылку. Ответ может содержать другую полезную информацию, такую ​​как заголовок, но он должен быть просто связан.
rich Какой-то мультимедийный проигрыватель, который, как и тип видео, возвращает html, width и height

Помимо выделенного видеоконтента, более распространенным типом, который вы, вероятно, увидите в дикой природе, является rich. Даже сам Flickr, по-прежнему отправляя photo ответ, также поставляет html для богатого встраиваемого «плеера» для изображения.

В большинстве случаев встраивание контента на ваш сайт — это просто случай использования кода, предоставленного в качестве html ценность.

Примечание о безопасности

Одна вещь, с которой вы могли бы быть справедливо осторожны, — это получение ответа HTML и программное встраивание его в страницу, которую вы размещаете. Без человеческого шага для перепроверки кода, который вы вставляете, всегда существует вероятность того, что этот код будет вредоносным. Таким образом, вы должны принять соответствующие меры для снижения риска.

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

Начиная

Как бы ни было важно понимать процесс при использовании oEmbed, реальность такова, что в большинстве распространенных языков есть доступные библиотеки, которые абстрагируют процесс и делают его относительно простым.

Например, упакованный oEmbed npm предоставляет очень простой интерфейс для выполнения запроса на основе URL-адреса контента и получения взамен ответа oEmbed.

Сначала установите пакет в свой проект:

npm i oembed

А затем запросите URL. Здесь я использую URL-адрес презентации на Notist, которую я дал об oEmbed. Как очень мета.

const oembed = require('oembed');
const url="https://noti.st/drewm/ZOFFfI";

oembed.fetch(url, { maxwidth: 1920 }, function(error, result) {
    if (error)
        console.error(error);
    else
        console.log("oEmbed result", result);
});

И ответ:

{ 
        type: 'rich',
        version: '1.0',
        title: 'Understanding oEmbed',
          author_name: 'Drew McLellan',
        author_url: 'https://noti.st/drewm',
        provider_name: 'Notist',
        provider_url: 'https://noti.st',
        cache_age: 604800,
        thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png',
        thumbnail_width: 1600,
        thumbnail_height: 900,
        html:
           '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>',
        width: 960,
        height: 540 
}

Если вы хотите сделать то же самое в PHP, удобный пакет под названием embed/embed доступен для установки через Composer.

composer require embed/embed

А затем в вашем PHP-проекте:

use EmbedEmbed;

$info = Embed::create('https://noti.st/drewm/ZOFFfI');

$info->title; // "Understanding oEmbed"
$info->authorName; // "Drew McLellan
$info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

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

Вывод

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

Теперь, когда вы знаете о oEmbed (извините), у вас нет оправдания не уделять серьезного внимания тому, как вы обрабатываете URL-адреса в своих будущих проектах.

  • oВстроить спецификацию
  • встроенный для NodeJS
  • вставлять/вставлять для PHP
  • «Объявление OEmbed: открытый стандарт для встраиваемого контента», Лия Калвер
Сокрушительная редакция
(ра, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Программное обнаружение общего кода с помощью oEmbed

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Программное обнаружение общего кода с помощью oEmbed

Название: Программное обнаружение общего кода с помощью oEmbed . Краткое описание: [ad_1] ⭐ Дрю Мак . Дата публикации: 22.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»