...
✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

YouTube-sovellusliittymä – Kuinka saada luettelo kanavasi YouTube-videoista

21

Äskettäin yksi lukijoistamme kysyi, kuinka saada luettelo YouTube-kanavan videoista? He halusivat näyttää luettelon videoistaan ​​taulukkomuodossa. Tässä artikkelissa tutkitaan, miten voit käyttää YouTube-sovellusliittymää luettelon hakemiseen kanavasi YouTube-videoista.

Käyttäjä voi nähdä kaikki videonsa itse YouTube-verkkosivustolla. Mutta jos haluat jakaa videoluettelon jonkun muun kanssa, sinun on pidettävä nämä tiedot offline-tilassa. Toisaalta jotkut käyttäjät saattavat haluta näyttää videoluettelon verkkosivustollaan.

Tästä huolimatta katsotaanpa, kuinka saada luettelo YouTube-videoista YouTube-sovellusliittymän avulla.

Huomaa: Tämän artikkelin koodin avulla voit myös saada luettelon minkä tahansa YouTube-kanavan videoista, joissa on kelvollinen YouTube-kanavan tunnus.

Hanki API-avain

YouTube-sovellusliittymän käytön aloittamiseksi sinun on ensin luotava sovellusliittymäavain Google-tililtäsi. Tämä avain on välttämätön, kun olet vuorovaikutuksessa YouTube-sovellusliittymien kanssa. Ilman tätä avainta YouTube pitää kaikkia saapuvia API-pyyntöjä luvattomina.

Luo API-avain noudattamalla seuraavia vaiheita.

  • Siirry Google Developer Consoleen https://console.developers.google.com.
  • Luo uusi projekti. Voit valita myös olemassa olevan projektin.
  • Kirjoita projektisi nimi. Google Console luo yksilöllisen projektitunnuksen.
  • Projektin luomisen jälkeen se näkyy vasemman sivupalkin yläosassa.
  • Napsauta Kirjasto. Näet luettelon Google-sovellusliittymistä.
  • Ota YouTube Data -sovellusliittymä käyttöön.
  • Napsauta Tunnistetiedot. Valitse API-avain kohdassa Luo kirjautumistiedot.
  • Kopioi API-avain. Tarvitsemme sitä hetken kuluttua.

YouTube-sovellusliittymä - Kuinka saada luettelo kanavasi YouTube-videoista

Hanki luettelo YouTube-videoista

Kun olet valmis API-avaimen kanssa, luo 3 tiedostoa projektiisi. Nämä tiedostot tarkoittavat kokoonpano- ja auttajamenetelmiä, Ajax-käsittelyä ja näyttävät lopputuloksen.

  • config.php: Tässä tiedostossa asetamme API-avaimen vakiona. Siinä on myös auttajamenetelmä, joka antaa API-puhelun ja vastaanottaa vastauksen.
  • ajax.php: Tämä tiedosto kutsuu sovellusliittymää saadakseen seuraavan tulossarjan, jos suurin mahdollinen tulos palautettaisiin.
  • index.php: Se sisältää lomakkeen, koodin Ajax-puheluun, näyttää videoluettelon.

Ilmoitetaan config.phptiedostossa API-avain vakiomuuttujana. Määritämme myös auttajamenetelmän, joka on vuorovaikutuksessa API-päätepisteiden kanssa.

config.php

<?php
define('GOOGLE_API_KEY', 'PASTE_YOUR_API_KEY');
 
function getYTList($api_url = '') {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    $arr_result = json_decode($response);
    if (isset($arr_result->items)) {
        return $arr_result;
    } elseif (isset($arr_result->error)) {
        //var_dump($arr_result); //this line gives you error info if you are not getting a video list.
    }
}

Muista korvata paikkamerkki todellisella API-avaimella. Palvelimellasi on myös oltava käytössä cURL-laajennus.

Luo lomake

Seuraavaksi tarvitsemme yksinkertaisen lomakkeen, johon voimme syöttää YouTube-kanavan tunnuksen ja palautettavien videoiden määrän. YouTube-sovellusliittymä palauttaa enintään 50 videota kerralla.

index.php

<form method="get">
    <p><input type="text" name="channel" placeholder="Enter Channel ID" value="<?php if(array_key_exists('channel', $_GET)) echo $_GET['channel']; ?>" required></p>
    <p><input type="number" name="max_result" placeholder="Max Results" min="1" max="50" value="<?php if(array_key_exists('max_result', $_GET)) echo $_GET['max_result']; ?>" required></p>
    <p><input type="submit" value="Submit"></p>
</form>

Lomakkeen lähettämisen yhteydessä lähetän kanavatunnuksen ja max_tuloksen GET-menetelmällä. Joten kirjoitan saman tiedoston päälle koodin seuraavasti:

<?php
require_once "config.php";
 
$arr_list = array();
if (array_key_exists('channel', $_GET) && array_key_exists('max_result', $_GET)) {
    $channel = $_GET['channel'];
    $url = "https://www.googleapis.com/youtube/v3/search?channelId=$channel&order=date&part=snippet&type=video&maxResults=". $_GET['max_result'] ."&key=". GOOGLE_API_KEY;
    $arr_list = getYTList($url);
}
?>

Tämä koodi sisältää määritystiedoston, hae parametrit, rakentaa API-URL-osoitteen ja välittää sen sitten edellisessä vaiheessa luomallemme auttajamenetelmälle. Jos haluat näyttää tuloksen, lisää alla oleva koodi lomakkeen jälkeen.

En aio keskittyä luettelon suunnitteluun. Opetusohjelman päätarkoitus on hakea YouTube-videoita. Näytän sen luettelomuodossa.

<?php
if (!empty($arr_list)) {
    echo '<ul class="video-list">';
    foreach ($arr_list->items as $yt) {
        echo "<li>". $yt->snippet->title ." (". $yt->id->videoId .")</li>";
    }
    echo '</ul>';
 
    if (isset($arr_list->nextPageToken)) {
        echo '<input type="hidden" class="nextpagetoken" value="'. $arr_list->nextPageToken .'" />';
        echo '<div id="loadmore">Load More</div>';
    }
}
?>

Täällä käymme läpi videoita ja tulostamme videon otsikon ja videotunnuksen. Jos saamme ‘nextPageToken’ -arvon, lisäämme piilotetun kentän ja Lataa lisää -elementin. Tämä johtuu siitä, että jos sinulla on yli 50 videota kanavalla, voimme saada seuraavan sarjan tietueita käyttämällä tätä ‘nextPageToken’ -arvoa. Tämän jälkeen meidän on soitettava Ajax-puhelu Lataa lisää napsautuksella.

Ajax-puhelu

Kun napsautamme Lataa lisää, se kutsuu ajax.phptiedostoa. Tämä tiedosto antaa meille seuraavan tietuejoukon, joka liitetään sitten olemassa olevaan luetteloon. Kirjoita alla oleva JavaScript-koodi index.phptiedoston loppuun .

<script>
var httpRequest, nextPageToken;
document.getElementById("loadmore").addEventListener('click', makeRequest);
function makeRequest() {
    httpRequest = new XMLHttpRequest();
    nextPageToken = document.querySelector('.nextpagetoken').value;
    if (!httpRequest) {
        alert('Giving up: Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {
            var list = JSON.parse(this.responseText);
            for(var i in list) {
                if(list[i].title != undefined && list[i].id != undefined) {
                    var newElement = document.createElement('li');
                    newElement.innerHTML = '<li>'+ list[i].title +'('+ list[i].id +')</li>';
                    document.querySelector('.video-list').appendChild(newElement);
                }
            }
 
            if(list[list.length-1].nextPageToken != undefined) {
                document.querySelector('.nextpagetoken').value = list[list.length-1].nextPageToken;
            } else {
                var loadmore = document.getElementById("loadmore");
                loadmore.parentNode.removeChild(loadmore);
            }
        }
    };
    httpRequest.open('GET', 'ajax.php?channel=<?php echo $_GET['channel']; ?>&max_result=<?php echo $_GET['max_result']; ?>&nextPageToken='+nextPageToken, true);
    httpRequest.send();
}
</script>

Tässä artikkelissa käytän vaniljakoodia ajax-puheluun ja liitän vastauksen DOM: iin. Ajax-tiedostoon lähetän kanavan id, max_result ja ‘nextPageToken’ arvot.

Ajax-tiedostoon näiden parametrien avulla rakennamme API-URL-osoitteen. Vastaanotettuamme luomme videotiedot sisältävän JSON-objektin ja lähetämme sen takaisin. Viimeiseen JSON: iin liitän myös ‘nextPageToken’ -arvon saadaksesi seuraavan tietuejoukon seuraavista Ajax-puheluista.

ajax.php

<?php
require_once "config.php";
 
$url = "https://www.googleapis.com/youtube/v3/search?channelId=". $_GET['channel'] ."&order=date&part=snippet&type=video&maxResults=". $_GET['max_result'] ."&pageToken=". $_GET['nextPageToken'] ."&key=". GOOGLE_API_KEY;
 
$arr_list = getYTList($url);
 
$arr_result = array();
if (!empty($arr_list)) {
    foreach ($arr_list->items as $yt) {
        array_push($arr_result, ['title' => $yt->snippet->title, 'id' => $yt->id->videoId]);
    }
    if (isset($arr_list->nextPageToken)) {
        array_push($arr_result, ['nextPageToken' => $arr_list->nextPageToken]);
    }
}
 
echo json_encode($arr_result);

JavaScript-koodimme vastaanottaa tämän JSON-vastauksen ja liittää tuloksen olemassa olevaan YouTube-videoiden luetteloon. Tätä prosessia jatketaan, kunnes löydämme arvon ‘nextPageToken’.

Toivon, että ymmärrät, miten saat luettelon YouTube-kanavan videoista. Jaa ajatuksesi tai ehdotuksesi alla olevassa kommenttiosassa.

Aiheeseen liittyvät artikkelit

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja