Erhalten Sie eine YouTube-Videoliste nach Schlüsselwörtern mit der YouTube-Such-API und JavaScript

Last updated 18. Oktober 2021

Inhalt

Rufen Sie die API auf und rendern Sie das Ergebnis

In der Vergangenheit habe ich einen Artikel veröffentlicht, wie man eine YouTube-Videoliste nach Schlüsselwörtern mit der YouTube-Such-API erhält, der für PHP-Entwickler geschrieben wurde. Einer unserer Leser suchte nach der gleichen Lösung in JavaScript.

In diesem Artikel untersuchen wir, wie Sie YouTube-Videos mit JavaScript mithilfe einer YouTube-Such-API nach Schlüsselwörtern durchsuchen. Ein Benutzer kann diese Lösung in seinen JavaScript-Anwendungen verwenden, die auf ReactJS, AngularJs, NodeJS usw.

Holen Sie sich Ihren API-Schlüssel

Um zu beginnen, müssen Sie zunächst einen API-Schlüssel in Ihrem Google Console-Konto erstellen. Dieser Schlüssel ist bei der Interaktion mit den YouTube-APIs erforderlich. Ohne diesen Schlüssel betrachtet YouTube alle eingehenden API-Aufrufe als nicht autorisiert.

Nachfolgend finden Sie die Schritte zum Abrufen des API-Schlüssels.

Gehen Sie zur Google Developer Console https://console.developers.google.com.
Erstellen Sie ein neues Projekt. Optional können Sie auch ein bestehendes Projekt auswählen.
Geben Sie Ihrem Projekt einen Namen. Die Google Console erstellt eine eindeutige Projekt-ID für Sie.
Ihr neu erstelltes Projekt wird oben in der linken Seitenleiste angezeigt.
Klicken Sie im linken Menü auf Bibliothek. Sie sehen eine Liste der Google APIs. Aktivieren Sie die YouTube-Daten-API.
Klicken Sie anschließend im linken Menü auf die Anmeldeinformationen. Wählen Sie API-Schlüssel unter Anmeldeinformationen erstellen aus.
Kopieren Sie diesen API-Schlüssel.

Erstellen Sie eine Benutzeroberfläche

Da wir eine YouTube-Videoliste nach Schlüsselwörtern erhalten, erstellen wir ein einfaches Formular, in das der Benutzer sein Schlüsselwort eingeben kann. Ich füge auch zwei weitere Felder hinzu, um eine Reihe von Videos einzugeben, die zurückgegeben werden sollen, und wähle die Option Suchen nach. Sie können YouTube-Videos nach Datum, Bewertung, Relevanz, Titel oder Anzahl der Aufrufe durchsuchen.

Erstellen Sie eine index.htmlDatei und fügen Sie den folgenden Code darin ein.

<!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>

Im obigen Code habe ich ‘id’ zu jeder Formulareingabe hinzugefügt, die verwendet wird, um die Eingabewerte zu erhalten. Es hat auch ein leeres Div mit ID, videoListContainerin dem unsere Videoliste angezeigt wird. Ich habe zwei JS-Dateien eingefügt – eine von Google und die andere ist unser eigenes JS, in das wir den Code für die YouTube-Such-API schreiben werden. Ich habe auch Fancybox CSS und JS über CDN eingebunden, die YouTube-Videos im Popup abspielen.

YouTube-Such-API in JavaScript

Bei JavaScript müssen wir zunächst den Google API-Client laden. Sobald wir den Google API-Client geladen haben, erlauben sie uns, ihre APIs aufzurufen. Lassen Sie uns eine js/custom.jsDatei erstellen und den Google API-Client wie folgt laden.

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); });
}

Stellen Sie sicher, dass Sie der setApiKeyMethode Ihren API-Schlüssel hinzufügen. Wenn Sie es richtig eingestellt haben, sollten Sie in der Browserkonsole die Meldung ‘GAPI-Client für API geladen’ sehen. Es bedeutet, dass wir gut vorankommen.

Rufen Sie die API auf und rendern Sie das Ergebnis

Wir sind alle bereit, die YouTube-Such-API aufzurufen und das Ergebnis im HTML anzuzeigen. Es gibt 2 Dinge, bei denen wir die API aufrufen müssen. Die Suche sollte mit dem Klicken auf die Schaltfläche "Senden" und auf paginierten Links beginnen. YouTube gibt eine Reihe von Videos für eine Stichwortsuche zurück. Daher werden wir Paginierung hinzufügen, um durch den nächsten und vorherigen Satz von Videos zu navigieren.

Um diese Szenarien zu handhaben, sieht unser Code wie folgt aus. Der folgende Code geht auch in die js/custom.jsDatei.

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); });
}

Hier erhalten wir zuerst die Eingabewerte aus einem Formular und speichern sie in Variablen. In der executeMethode schreiben wir einen Code, der die YouTube-API aufruft. Als Antwort erhalten wir die Liste der Videos zusammen mit prevPageToken oder nextPageToken oder beiden. Diese Token werden verwendet, um eine Liste mit nächsten oder vorherigen Videos nach Schlüsselwort zu erhalten. Wir fügen diese Token als Datenattribute an die Paginierungslinks an. Wenn wir nun auf paginate-Links klicken, wird der API-Aufruf erneut gestartet, führt seine Aufgabe aus und gibt uns eine Antwort. Aus der API-Antwort zeigen wir Videoinformationen innerhalb des div mit der ID an videoListContainer.

In unserem Tutorial zeigen wir Video-Thumbnails und Videotitel in der Liste an. Sie können auch andere Videoinformationen nach Ihren Anforderungen ausdrucken. Der Benutzer kann die Variable drucken, um listItemszu überprüfen, welche Art von Informationen die YouTube-API in der Antwort zurückgibt. Abgesehen davon habe ich im obigen Code auch Fancybox mit dem data-fancyboxAttribut verwendet. Dieses Attribut spielt das Video in einem Pop-up ab.

Ich hoffe, Sie haben gelernt, wie Sie eine YouTube-Videoliste nach Schlüsselwörtern in JavaScript erhalten. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net