Skip to content
📺 Kuidas saada videoid YouTube'i esitusloendist API kaudu: töötav kood 15 minutiga
VeebiarendusWordPress
6 min1,230 sõna

📺 Kuidas saada videoid YouTube'i esitusloendist API kaudu: töötav kood 15 minutiga

Saatsid YouTube’i video lingi redaktorisse ja see töötab. Aga kui sul on vaja terve esitusloend oma saidile, mis uued videod automaatselt üles korjab, muutub linkide käsitsi kopeerimine iga kord tüütuks.

Skript PHP-s koos YouTube Data API v3-ga lahendab probleemi täielikult: see tõmbab kõik videod igast avalikust esitusloendist, tagastab JSON-i ja sina kuvad neid nii, nagu soovid, kaartide ruudustikuna, loendina, galeriina. Seadistamine võtab aega 15 minutit, vaja on ainult API võtit ja elementaarseid PHP-teadmisi.

Allpool on töötav kood WordPressile koos veakäsitluse, lehekülgedeks jaotamise ja vahemällu salvestamisega. Lähenemine on universaalne: see töötab igas PHP-projektis, mitte ainult WP-s.

💡 Kiire ülevaade:

  • Loo API võti Google Cloud Console’is ja seo see YouTube Data API v3-ga
  • Saada päring playlistItems-le ja saa JSON kõigi esitusloendi videotega
  • Töötle vastust, kogu pisipildid ja lingid, kuva need lehel ruudustikuna
  • Lisa lehekülgedeks jaotamine üle 50 videoga esitusloendite jaoks ja vahemällu salvestamine set_transient() abil

1. Samm: YouTube Data API v3 võtme loomine

API võti tuvastab sinu rakenduse YouTube’i jaoks ja jälgib kvoote. Luuakse tasuta, päevane limiit on 10 000 ühikut. Ühest võtmest on enamiku saitide jaoks enam kui küll.

Mine oma Google’i kontoga Google Cloud Console’isse. Loo uus projekt, projekti valimise nupp on ülemisel ribal, seejärel New Project. Nimeta see tähendusrikkalt, näiteks my-youtube-feed.

Pärast projekti loomist mine jaotisse APIs & Services → Library. Trüki otsinguribale YouTube Data API v3 ja klõpsa Enable. Ilma selle sammuta ei seostu võti õige API-ga ja päringud tagastavad vea 403.

Nüüd võti ise. Ava külgmenüüst Credentials, klõpsa Create Credentials → API key. Süsteem genereerib võtme ja kuvab selle modaalaknas. Kopeeri see kohe: pärast akna sulgemist on võti nimekirjas nähtav, kuid selle väärtus on osaliselt peidetud.

Kindlasti klõpsa Restrict key. Jaotises API restrictions vali YouTube Data API v3, siis ei tööta võti teiste API-de jaoks, isegi kui see satub avalikku repositooriumisse. Kohaliku arenduse puhul võib HTTP-viitaja tühjaks jätta.

Võti näeb välja umbes nii: AIzaSyD-.... Salvesta see failis wp-config.php rea define('YOUTUBE_API_KEY', '...') abil ja lisa wp-config.php faili .gitignore. Ära kõvakodeeri võtit teema koodi.

2. Samm: esitusloendi videote hankimine

Päringu tegemiseks on vaja kahte asja: API võtit ja esitusloendi ID-d. ID eraldatakse URL-ist: ava esitusloend YouTube’is, kopeeri aadressiriba sisu. URL-is olev list= parameeter on esitusloendi ID: näiteks PLp0YhAQYkolGq1e6r1m5....

Põhiline PHP päring playlistItems lõpp-punktile:

1$api_key     = 'AIzaSy...';          // your key from step 1
2$playlist_id = 'PLp0YhAQYkolG...';   // playlist ID from URL
3 
4$api_url = 'https://www.googleapis.com/youtube/v3/playlistItems' .
5    '?part=snippet' .
6    '&maxResults=50' .
7    '&playlistId=' . urlencode($playlist_id) .
8    '&key=' . $api_key;
9 
10$response = file_get_contents($api_url);
11$data     = json_decode($response, true);
12 
13if (json_last_error() !== JSON_ERROR_NONE) {
14    die('JSON parsing error: ' . json_last_error_msg());
15}

Mis siin toimub. part=snippet küsib põhiandmeid: pealkiri, kirjeldus, pisipilt, positsioon esitusloendis. Täieliku komplekti jaoks võid määrata snippet,contentDetails,status. maxResults=50 on maksimum ühe päringu kohta, API tagastab vaikimisi 5 kirjet, seega on parem parameeter selgesõnaliselt määrata. Kodeeri playlistId funktsiooniga urlencode() erimärkide puhuks.

Tootmiskeskkonnas asenda file_get_contents() funktsiooniga wp_remote_get() (WordPressis) või cURL-iga koos ajalõpuga. Otsepäring ebaõnnestub, kui Google on ajutiselt kättesaamatu või võrk on aeglane. Siin on versioon HTTP veakäsitlusega:

1$response = wp_remote_get($api_url, [
2    'timeout' => 15,
3    'headers' => ['Accept' => 'application/json'],
4]);
5 
6if (is_wp_error($response)) {
7    error_log('YouTube API error: ' . $response->get_error_message());
8    return [];
9}
10 
11$http_code = wp_remote_retrieve_response_code($response);
12if ($http_code !== 200) {
13    error_log('YouTube API HTTP ' . $http_code);
14    return [];
15}
16 
17$body = wp_remote_retrieve_body($response);
18$data = json_decode($body, true);

Kaks kontrolltaset: kõigepealt tuvastab is_wp_error() võrgutõrked, seejärel kontrollime HTTP koodi. Kui midagi läheb valesti, tagastame tühja massiivi, sait ei jookse kokku.

3. Samm: videote loendi kuvamine lehel

API tagastab items massiivi. Iga element on üks esitusloendi video. Vastuse struktuur:

1{
2  "items": [
3    {
4      "snippet": {
5        "title": "Video title",
6        "description": "Description...",
7        "thumbnails": {
8          "default":  { "url": "https://i.ytimg.com/.../default.jpg" },
9          "medium":   { "url": "https://i.ytimg.com/.../mqdefault.jpg" },
10          "high":     { "url": "https://i.ytimg.com/.../hqdefault.jpg" }
11        },
12        "resourceId": {
13          "videoId": "dQw4w9WgXcQ"
14        }
15      }
16    }
17  ]
18}

Video tuvastatakse resourceId.videoId abil. Sellest pannakse kokku link https://www.youtube.com/watch?v=<videoId>. Pisipildid on thumbnails all kolmes resolutsioonis: kaartide ruudustiku jaoks võta medium, kompaktse loendi jaoks default.

Väljundkood WordPressile, lühikood või lehe mall:

1if (! empty($data['items'])) {
2    echo '<div class="yt-playlist-grid">';
3 
4    foreach ($data['items'] as $item) {
5        $title     = esc_html($item['snippet']['title']);
6        $video_id  = esc_attr($item['snippet']['resourceId']['videoId']);
7        $thumbnail = esc_url($item['snippet']['thumbnails']['medium']['url']);
8        $link      = 'https://www.youtube.com/watch?v=' . $video_id;
9 
10        printf(
11            '<a href="%s" class="yt-card" target="_blank" rel="noopener">'
12            . '<img src="%s" alt="%s" loading="lazy">'
13            . '<span>%s</span></a>',
14            $link, $thumbnail, $title, $title
15        );
16    }
17 
18    echo '</div>';
19}

Kolm asja, mis säästavad silumisaega:

  • loading="lazy". Kui lehel on 50 videot ilma laisa laadimiseta, langeb PageSpeed. Atribuut ütleb brauserile: lae pilt alles siis, kui selleni keritakse.
  • esc_html()** ja esc_url(). Kohustuslik puhastamine WordPressi jaoks. Videote pealkirjad sisaldavad mõnikord jutumärke ja HTML-olemuseid, ilma puhastamiseta lõhuvad need paigutuse.
  • target="_blank"** koos rel="noopener". Ava YouTube uuel vahelehel, kuid ära anna sellele juurdepääsu window.opener-ile, kaitse tab-napping’i vastu.

CSS ruudustiku jaoks, minimaalne, standardse teema jaoks:

1.yt-playlist-grid {
2    display: grid;
3    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
4    gap: 20px;
5}
6.yt-card {
7    text-decoration: none;
8    color: inherit;
9    border-radius: 8px;
10    overflow: hidden;
11    transition: transform 0.2s;
12}
13.yt-card:hover {
14    transform: translateY(-2px);
15}
16.yt-card img {
17    width: 100%;
18    aspect-ratio: 16 / 9;
19    object-fit: cover;
20}
21.yt-card span {
22    display: block;
23    padding: 10px;
24    font-weight: 600;
25    font-size: 14px;
26}

Ruudustik kohandub automaatselt ekraani laiusega: auto-fill + minmax(280px, 1fr) annavad ühest kuni mitme veeruni ilma meediapäringuteta.

4. Samm: lehekülgedeks jaotamine, kvoodid ja levinud vead

Lehekülgedeks jaotamine. Üks päring tagastab maksimaalselt 50 videot. Kui esitusloendis on neid rohkem, ilmub vastusesse nextPageToken väli. Edasta see järgmises päringus, API tagastab järgmise lehe. Tsükkel:

1$all_items  = [];
2$page_token = null;
3 
4do {
5    $url = $api_url . '&pageToken=' . urlencode($page_token ?? '');
6    // ... API request ...
7    $all_items  = array_merge($all_items, $data['items'] ?? []);
8    $page_token = $data['nextPageToken'] ?? null;
9} while ($page_token && count($all_items) < 500);

Tsükkel katkeb 500 video juures, mis on mõistlik lagi saidi lehe jaoks. Ilma piiranguta riskid paari laadimisega kogu kvoodi ära kasutada.

Kvoodid. Iga playlistItems.list kutse maksab 1 kvoodiühiku, see on kinnitatud Google’i ametlikus kvooditabelis. Päevane limiit on 10 000 ühikut. See on 10 000 päringut päevas, mis on valdavale enamusele saitidest enam kui piisav. Aga kui esitusloend uueneb sageli, lisa vahemällu salvestamine:

1$cache_key   = 'yt_playlist_' . md5($playlist_id);
2$cached_data = get_transient($cache_key);
3 
4if ($cached_data !== false) {
5    return $cached_data;
6}
7 
8// ... API request ...
9 
10set_transient($cache_key, $data, HOUR_IN_SECONDS * 6);

Kuus tundi on mõistlik tasakaal värskuse ja kvoodisäästu vahel. Mittekriitiliste esitusloendite puhul määra 12-24 tundi. get_transient() ja set_transient() on WordPressi sisseehitatud funktsioonid, need töötavad objektivahemäluga (Redis/Memcached), kui see on seadistatud, vastasel juhul kirjutavad nad wp_options tabelisse.

Levinud vead ja mida nendega teha:

  • 403 Forbidden. API pole projekti jaoks Google Cloud Console’is lubatud. Mine tagasi 1. sammu juurde: YouTube Data API v3 Enable nuppu peab olema vajutatud. Kontrolli ka, kas võtme seadetes on IP-piirang.
  • 400 Bad Request, „API key not valid". Võti on just loodud ja pole veel aktiveerunud. Oota 2-5 minutit: API piirangud ei jõustu hetkega.
  • 404 Not Found. Vigane esitusloendi ID või esitusloend on privaatne. API võti tagastab ainult avalikke ja loendis mitteolevaid esitusloendeid. Privaatsed nõuavad OAuth-autoriseerimist.
  • Tühi items massiiv kehtiva ID korral. Tõenäoliselt on esitusloend tühi. Ava esitusloendi URL brauseris ja veendu, et seal on videod.

💻 Video: YouTube Data API v3 tegevuses

Lühike video sellel teemal, mis näitab visuaalselt kogu protsessi võtme loomisest kuni videote loendi kuvamiseni:

⁉️🤔 Korduma kippuvad küsimused

Kas API töötab privaatsete esitusloenditega?

Ei. playlistItems.list koos API võtmega tagastab ainult avalikke ja loendis mitteolevaid esitusloendeid. Privaatsete jaoks on vaja OAuth-autoriseerimist: kasutaja peab sinu rakendusele selgesõnaliselt juurdepääsu oma kontole andma. Avaliku agregaatorsaidi jaoks piisab API võtmest.

Kas ma saan videoid kellegi teise esitusloendist?

Jah, kui esitusloend on avalik. API võti ei ole seotud esitusloendi omanikuga, see tuvastab sinu rakenduse, mitte YouTube’i kasutaja. Iga avalik esitusloend on ID järgi kättesaadav, sõltumata sellest, kes selle lõi.

Kuidas saada korraga rohkem kui 50 videot?

See pole võimalik, see on playlistItems maxResults-i kõva limiit, mis on fikseeritud Google’i dokumentatsioonis. Kasuta lehekülgedeks jaotamist nextPageToken abil (4. samm). 300 videoga esitusloendi jaoks on vaja 6 järjestikust päringut, mis kokku kulutavad 6 kvoodiühikut 10 000 päevasest.

Miks video pisipildid ei kuvata?

Kontrolli URL-i thumbnails all: välja nimi on url, mitte link ega src. Teine põhjus: reklaamiblokeerijad lõikavad mõnikord domeeni i.ytimg.com välja. Kolmas: mõnel vanal videol (enne 2010. aastat) pole kõrge resolutsiooniga pisipilte, võta default, see on alati olemas.

Mida teha, kui võti on lekkinud?

Mine kohe Google Cloud Console’isse → Credentials, leia võti ja klõpsa Delete. Loo uus. Vana võti deaktiveeritakse 5 minuti jooksul. Hoia võtit wp-config.php failis rea define('YOUTUBE_API_KEY', '...') abil ja välista see fail .gitignore kaudu repositooriumist.

Kas API-ga on üldse mõtet jännata, kui saab lihtsalt esitusloendi lingi kleepida?

Kui saidile piisab ühest staatilisest esitusloendist iframe’i kaudu, pole API-t vaja, YouTube pakub valmis manustamiskoodi. Kuid niipea, kui on vaja automaatselt uusi videoid üles korjata, kuupäeva järgi filtreerida, paigutust kohandada või pisipilte mittestandardse kujundusega kuvada, muutub API ainsaks toimivaks variandiks.

WordPressi saidi puhul kõrvaldab wp_remote_get() + set_transient() kombinatsioon täielikult kvoodi- ja kiirusemured: kord paari tunni jooksul tõmbab skript JSON-i, salvestab selle vahemällu ja esiosa töötab vahemäluga koheselt. Esitusloend uueneb ise, toimetaja ei pea millelegi klõpsama.

Kui sinu teema toetab kohandatud PHP-d mallides, võta kood 3. sammust, muuda CSS-i vastavalt oma kujundusele. Kui kasutad lehe koostajat, mähi PHP loogika lühikoodi ja sisesta see ükskõik kuhu kujul [youtube_playlist id="PLp0..."].

Proovi ühe esitusloendiga: 15 minutit võtme ja esimese päringu jaoks ja näed, kas lähenemine sinu ülesande jaoks töötab. Ja kui oled API-t juba muuks otstarbeks kasutanud, kirjuta kommentaaridesse, milline lõpp-punkt osutus kõige kasulikumaks.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.