@estluced

Как работает парсинг сторонних ссылок?

Добрый вечер!
В разработке сайта появилась проблемка, нужно как-то отображать ссылки (например ссылка на видео YouTube), можете рассказать\скинуть статью как реализовать данную опцию?
То в гугле ничего не нашел:(
Так же в разработке использую Vue/NodeJS.
Заранее спасибо за информацию!
P.S Под отображением я подразумеваю подгрузку контента (опять таки, как пример - ютуб)
Пример:
6010d0f1a5be3846301417.png
  • Вопрос задан
  • 123 просмотра
Решения вопроса 3
Zettabyte
@Zettabyte
Специалист по восстановлению данных
Думаю, что на разных сайтах реализация различается, но вероятнее всего, подтягиваются метаданные конкретного ролика - что-то наподобие Open Graph protocol (у Ютьюба наверняка есть что-то подобное, начните с просмотра кода страницы), они парсятся, выбираются нужные. Их отображение - как вам понравится.

Картинки - по принципу
https://img.youtube.com/vi/<youtube_video_id>/[0-3].jpg

ID - понятно, 0-3 - варианты размеров (выберите нужный).
Вот для вашего ролика: https://img.youtube.com/vi/bhUAIrV-PIc/0.jpg

Либо
https://img.youtube.com/vi/<youtube_video_id>/default.jpg

Вместо default.jpg можно подставлять mqdefault.jpg, sddefault.jpg, hqdefault.jpg и maxresdefault.jpg. Это тоже разное качество, но не у всех роликов есть все варианты.

Также загляните в API: https://developers.google.com/youtube/v3/
Но сейчас, по-моему, нужно получать ключ, просто так им не побалуешься.

Кстати, для 2-й версии API находится вот такой код:
Get Youtube video details with JavaScript
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
 <script type="text/javascript">
 var vidid = "bhUAIrV-PIc";
 function getYouTubeInfo() {
 $.ajax({
 url: "http://gdata.youtube.com/feeds/api/videos/"+vidid+"?v=2&alt=json&orderby=published&prettyprint=true",
 dataType: "jsonp",
 success: function (data) {parseresults(data)}
 });
 }
 function parseresults(data) {
 var ytvtit = data.entry.title.$t;
 var ytvcat = data.entry.media$group.media$category[0].label;
 var ytvpub = data.entry.published.$t.substr( 0, 10 );
 var ytvath = data.entry.author[0].name.$t;
 var ytvatl = data.entry.media$group.media$credit[0].$t;
 var ytvdur = data.entry.media$group.yt$duration.seconds;
 var ytvrta = data.entry.gd$rating.average.toFixed(1);
 var ytvrtm = data.entry.gd$rating.max;
 var ytvrtc = data.entry.gd$rating.numRaters;
 var ytvlks = data.entry.yt$rating.numLikes;
 var ytvdlk = data.entry.yt$rating.numDislikes;
 var ytvvwc = data.entry.yt$statistics.viewCount;
 var ytvfav = data.entry.yt$statistics.favoriteCount;
 var ytvcmc = data.entry.gd$comments.gd$feedLink.countHint;
 var ytvdes = data.entry.media$group.media$description.$t;
 var ytvurl = 'https://www.youtube.com/watch?v='+vidid;
 var ytvtmb0 = data.entry.media$group.media$thumbnail[0].url;
 $('#ytvtitle').html(ytvtit);
 $('#ytvcatgry').html(ytvcat);
 $('#ytvpublish').html(ytvpub);
 $('#ytvauthr').html('ytvath');
 $('#ytvduration').html(ytvdur + ' Seconds' );
 $('#ytvrtngavrg').html(ytvrta);
 $('#ytvrtngmax').html(ytvrtm);
 $('#ytvrtngcnt').html(ytvrtc);
 $('#ytvlks').html(ytvlks);
 $('#ytvdislks').html(ytvdlk);
 $('#ytvviewcount').html(ytvvwc);
 $('#ytvfavcount').html(ytvfav);
 $('#ytvthumb').html('
');
 $('#ytvcomment').html(ytvcmc);
 $('#ytvdescription').html(ytvdes);
 $('#ytvurl').html('Watch on YouTube');
 $('#ytvply').html('



');
 }
 $(document).ready(function () {
 getYouTubeInfo();
 });
 </script>
Ответ написан
dima9595
@dima9595
Junior PHP
Чисто моя теория:
1. При вставке ссылки (http/https) отрабатывает скрипт. Скрипт парсит данную ссылку.
2. Если ссылка ведёт к какому-нибудь популярному сайту, например, тот же ютуб, то он получает его идентификатор видео.
3. По API или ещё как-то он получает это видео и вставляет iframe какой-нибудь (у ютуба вроде есть свой iframe, точно не помню).
4. После этот Iframe вставляется чуть ниже сообщения, как на скриншоте.
Вроде всё. Есть конечно проблемы - как, например, сохранять такое же форматирование, но это другая уже тема.
Ответ написан
@robprane
Для общего случая решение - парсить meta property="og:image". Здесь сайты содержат ссылку на изображение, которое должно представлять этот сайт.
Для частных случаев, когда этого тега нет, как у YouTube, надо искать отдельные решения, одно из них уже написал Zettabyte.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 23:34
5000 руб./за проект
07 мар. 2021, в 23:14
10000 руб./за проект