Отримайте список відео YouTube за ключовими словами за допомогою API пошуку YouTube та JavaScript

Останнє оновлення Жов 17, 2021

Зміст

Викличте API і отримайте результат рендерінгу

Раніше я опублікував статтю Як отримати список відео YouTube за ключовими словами за допомогою API пошуку YouTube, яка була написана для розробників PHP. Один з наших читачів шукав те саме рішення в JavaScript.

У цій статті ми вивчаємо, як шукати відео YouTube за ключовими словами за допомогою JavaScript, використовуючи API пошуку YouTube. Користувач може використовувати це рішення у своїх програмах JavaScript, які побудовані на ReactJS, AngularJs, NodeJS тощо.

Отримайте свій ключ API

Для початку спочатку потрібно створити ключ API у своєму обліковому записі Google Console. Цей ключ необхідний під час взаємодії з API YouTube. Без цього ключа YouTube розглядає всі вхідні дзвінки через API як несанкціоновані.

Нижче наведені кроки для захоплення ключа API.

Перейдіть на Консоль розробника Google https://console.developers.google.com.
Створіть новий проект. Ви також можете вибрати існуючий проект.
Дайте назву своєму проекту. Google Console створить для вас унікальний ідентифікатор проекту.
Ваш щойно створений проект з’явиться у верхній частині лівої бічної панелі.
Клацніть на Бібліотека в меню ліворуч. Ви побачите список API Google. Увімкніть API даних YouTube.
Далі в меню ліворуч клацніть на Повноваження. Виберіть ключ API у розділі Створення облікових даних.
Скопіюйте цей ключ API.

Створіть інтерфейс користувача

Оскільки ми збираємося отримати список відео YouTube за ключовим словом, давайте створимо просту форму, де користувач може ввести своє ключове слово. Я також додаю ще два поля, щоб ввести кількість відео, які потрібно повернути, і вибрати пошук за опцією. Ви можете шукати відео у YouTube на основі дати, рейтингу, релевантності, заголовка або кількості переглядів.

Створіть index.htmlфайл і додайте в нього наступний код.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Get YouTube Video by Keyword</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
        <style>
        .paginate {
            margin-right: 5px;
        }
        li {
            display: inline-block;
        }
        </style>
    </head>
    <body>
        <form id="yt-form">
            <p><input type="text" id="keyword-input" placeholder="Enter keyword" required></p>
            <p><input type="number" id="maxresult-input" placeholder="Max Results" min="1" max="50" required></p>
            <p>
                <select id="order-input" required>
                    <option value="">--SELECT ORDER--</option>
                    <option value="date">Date</option>
                    <option value="rating">Rating</option>
                    <option value="relevance">Relevance</option>
                    <option value="title">Title</option>
                    <option value="viewCount" selected>View Count</option>
                </select>
            </p>
            <p>
                <input type="submit" value="Submit">
            </p>
        </form>
       
        <div id="videoListContainer"></div>
       
        <script src="https://apis.google.com/js/api.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

У наведеному вище коді я додав ‘id’ до кожного вводу форми, який буде використовуватися для отримання вхідних значень. Він також має порожній div з ідентифікатором, videoListContainerвсередині якого відображатиметься наш список відео. Я включив два файли JS – один від Google, а інший – наш власний JS, де ми напишемо код для API пошуку YouTube. Я також включив Fancybox CSS та JS через CDN, які будуть відтворювати відео YouTube у спливаючому вікні.

API пошуку YouTube у JavaScript

Що стосується JavaScript, нам спочатку потрібно завантажити клієнт Google API. Після завантаження клієнта Google API вони дозволяють нам викликати їх API. Створимо js/custom.jsфайл і завантажимо клієнт Google API наступним чином.

gapi.load("client", loadClient);
  
function loadClient() {
    gapi.client.setApiKey("YOUTUBE_API_KEY");
    return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
                function(err) { console.error("Error loading GAPI client for API", err); });
}

Не забудьте додати свій ключ API до setApiKeyметоду. Якщо ви встановили його правильно, тоді на консолі браузера ви побачите повідомлення "Клієнт GAPI, завантажений для API". Це означає, що нам добре йти вперед.

Викличте API і отримайте результат рендерінгу

Ми всі готові викликати API пошуку YouTube і відобразити результат у HTML. Є дві речі, де нам потрібно викликати API. Пошук слід розпочати натисканням кнопки «Відправити» та посиланням на сторінки. YouTube повертає кілька відеороликів для пошуку за ключовими словами. Тож ми додамо сторінку для навігації наступним та попереднім набором відео.

Для обробки цих сценаріїв наш код буде таким. Наведений нижче код також знаходиться у js/custom.jsфайлі.

const ytForm = document.getElementById('yt-form');
const keywordInput = document.getElementById('keyword-input');
const maxresultInput = document.getElementById('maxresult-input');
const orderInput = document.getElementById('order-input');
const videoList = document.getElementById('videoListContainer');
var pageToken = '';
  
ytForm.addEventListener('submit', e => {
    e.preventDefault();
    execute();
});
  
function paginate(e, obj) {
    e.preventDefault();
    pageToken = obj.getAttribute('data-id');
    execute();
}
  
// Make sure the client is loaded before calling this method.
function execute() {
    const searchString = keywordInput.value;
    const maxresult = maxresultInput.value;
    const orderby = orderInput.value;
  
    var arr_search = {
        "part": 'snippet',
        "type": 'video',
        "order": orderby,
        "maxResults": maxresult,
        "q": searchString
    };
  
    if (pageToken != '') {
        arr_search.pageToken = pageToken;
    }
  
    return gapi.client.youtube.search.list(arr_search)
    .then(function(response) {
        // Handle the results here (response.result has the parsed body).
        const listItems = response.result.items;
        if (listItems) {
            let output = '<h4>Videos</h4><ul>';
  
            listItems.forEach(item => {
                const videoId = item.id.videoId;
                const videoTitle = item.snippet.title;
                output += `
                    <li><a data-fancybox href="https://www.youtube.com/watch?v=${videoId}"><img src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" /></a><p>${videoTitle}</p></li>
                `;
            });
            output += '</ul>';
  
            if (response.result.prevPageToken) {
                output += `<br><a class="paginate" href="#" data-id="${response.result.prevPageToken}" onclick="paginate(event, this)">Prev</a>`;
            }
  
            if (response.result.nextPageToken) {
                output += `<a href="#" class="paginate" data-id="${response.result.nextPageToken}" onclick="paginate(event, this)">Next</a>`;
            }
  
            // Output list
            videoList.innerHTML = output;
        }
    },
    function(err) { console.error("Execute error", err); });
}

Тут ми спочатку отримуємо вхідні значення з форми та зберігаємо їх у змінних. У executeметоді ми пишемо код, який викликає API YouTube. У відповідь ми отримуємо список відео разом із prevPageToken або nextPageToken або і тим, і іншим. Ці маркери використовуються для отримання набору наступного або попереднього списку відео за ключовим словом. Ми додаємо ці маркери як атрибути даних до посилань на пагінацію. Тепер, коли ми натискаємо посилання на пагінати, виклик API ініціюється знову, виконує своє завдання і дає нам відповідь. З відповіді API ми відображаємо відеоінформацію всередині div, який має ідентифікатор videoListContainer.

У нашому посібнику ми відображаємо у списку ескізи відео та назви відео. Ви також можете надрукувати іншу відеоінформацію відповідно до ваших вимог. Користувач може надрукувати змінну, listItemsщоб перевірити, яку інформацію надає YouTube API у відповіді. Окрім цього, я також використовував Fancybox у наведеному вище коді, використовуючи data-fancyboxатрибут. Цей атрибут буде відтворювати відео у спливаючому вікні.

Сподіваюсь, ви дізналися, як отримати список відео YouTube за ключовими словами в JavaScript. Будь ласка, поділіться своїми думками та пропозиціями в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net