Статьи

Пример файла JSON на YouTube

Октябрь 1, 2018

Эта серия статей была переписана в середине 2017 года с актуальной информацией и свежими примерами.

YouTube — это онлайн-сервис для обмена видео, созданный бывшими сотрудниками PayPal в 2005 году. Сегодня он является дочерней компанией Google и в настоящее время является вторым по популярности веб-сайтом в мире по версии Alexa .

В этом примере я покажу вам, как использовать API данных YouTube . API позволяет интегрировать функции YouTube в веб-сайт. Он также предоставляет разработчикам доступ к методу search.list API имеет несколько клиентских библиотек, ориентированных на разные платформы, включая Android, Go, Java, JavaScript, NodeJS, .NET, PHP, Python и Ruby.

Давайте посмотрим, как выполнить простой поиск с использованием JavaScript в четыре этапа:

  1. Клонируйте проект, как описано на начальной странице , если вы этого еще не сделали.

  2. Установите пакет http-сервера на вашем компьютере глобально . 

     $ npm i -g http-server

  3. Получить ключ API YouTube можно по этой ссылке . Получив его, откройте файл src/youtube-example.htmlundefined

    HTML / JS код : 

     <!DOCTYPE html>
<html>
<head>
<title>YouTube JSON Example</title>

<script type="text/javascript">
  const api = undefined; // Specify your api key here

  // Load API library
  function onLoad() {
    if(api) {
      gapi.client.load('youtube', 'v3', loadYouTubeApi);
    } else {
      document.getElementById('output').innerHTML += 'API key has not been specified!';
    }
  }

  // Set API Key
  function loadYouTubeApi() {
    gapi.client.setApiKey(api);
    search('sitepoint');
  }

  // Call the search.list()
  function search(queryTerm) {
    let request = gapi.client.youtube.search.list({
        part: 'id',
        q: queryTerm
    });
    // Execute the request call and output it in HTML view
    request.execute((response) => {
      const responseString = JSON.stringify(response, '', 2);
      document.getElementById('output').innerHTML += responseString;
    })
  }
</script>
<script src="https://apis.google.com/js/client.js?onload=onLoad" type="text/javascript"></script>
</head>
<body>
<h1>YouTube Search Results</h1>
<pre id="output"></pre>
</body>
</html>

  4. Чтобы запустить HTML-код, вам нужно загрузить его через сервер. Открытие его непосредственно с помощью браузера не будет работать. Перейдите в папку srchttp-server 

     $ http-server

Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://10.0.2.15:8080

После того, как сервер запущен и работает, вы можете открыть браузер и получить доступ к странице, используя URL-адрес: http://127.0.0.1:8080/youtube-example.html. Через несколько секунд страница будет заполнена данными JSON, которые выглядят следующим образом:

Ответ API JSON YouTube (частичные результаты): 

 {
  "kind": "youtube#searchListResponse",
  "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/PaiEDiVxOyCWelLPuuwa9LKz3Gk\"",
  "nextPageToken": "CAUQAA",
  "regionCode": "KE",
  "pageInfo": {
    "totalResults": 4249,
    "resultsPerPage": 5
  },
  "items": [
    {
      "kind": "youtube#searchResult",
      "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/QpOIr3QKlV5EUlzfFcVvDiJT0hw\"",
      "id": {
        "kind": "youtube#channel",
        "channelId": "UCJowOS1R0FnhipXVqEnYU1A"
      }
    },
    {
      "kind": "youtube#searchResult",
      "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/AWutzVOt_5p1iLVifyBdfoSTf9E\"",
      "id": {
        "kind": "youtube#video",
        "videoId": "Eqa2nAAhHN0"
      }
    },
    {
      "kind": "youtube#searchResult",
      "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/2dIR9BTfr7QphpBuY3hPU-h5u-4\"",
      "id": {
        "kind": "youtube#video",
        "videoId": "IirngItQuVs"
      }
    }
  ]
}

Вот другие примеры из этой серии:

44
Share: