Obtenez votre cl\u00e9 API<\/h3>\n
Pour commencer avec l’API YouTube, vous devez d’abord cr\u00e9er une cl\u00e9 API \u00e0 partir de votre compte Google. Cette cl\u00e9 est n\u00e9cessaire lors de l’interaction avec les API YouTube. Sans cette cl\u00e9, YouTube consid\u00e8re toutes les demandes d’API entrantes comme non autoris\u00e9es.<\/p>\n
Suivez les \u00e9tapes ci-dessous pour cr\u00e9er une cl\u00e9 API.<\/p>\n
- \n
- Acc\u00e9dez \u00e0 la console d\u00e9veloppeur de Google <\/a>https:\/\/console.developers.google.com<\/a>.<\/li>\n
- Cr\u00e9er un nouveau projet. Vous pouvez \u00e9galement s\u00e9lectionner un projet existant.<\/li>\n
- Tapez un nom de votre projet. Google Console cr\u00e9era un ID de projet unique.<\/li>\n
- Apr\u00e8s avoir cr\u00e9\u00e9 un projet, il appara\u00eetra en haut de la barre lat\u00e9rale gauche.<\/li>\n
- Cliquez sur Biblioth\u00e8que. Vous verrez la liste des API Google.<\/li>\n
- Activez l’API de donn\u00e9es YouTube.<\/li>\n
- Cliquez sur les informations d’identification. S\u00e9lectionnez la cl\u00e9 API sous Cr\u00e9er des informations d’identification.<\/li>\n
- Copiez la cl\u00e9 API. Nous en aurons besoin dans un instant.<\/li>\n<\/ul>\n
![\"API](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20424-6081ef644e221.png\")
<\/a><\/p>\nObtenez une liste de vid\u00e9os YouTube<\/h3>\n
Une fois que vous \u00eates pr\u00eat avec la cl\u00e9 API, cr\u00e9ez 3 fichiers dans votre projet. Ces fichiers repr\u00e9sentent les m\u00e9thodes de configuration et d’assistance, la gestion Ajax et affichent le r\u00e9sultat final.<\/p>\n
- \n
config.php<\/code>: Dans ce fichier, nous d\u00e9finissons la cl\u00e9 API comme une constante. Il a \u00e9galement une m\u00e9thode d’assistance qui donne un appel API et re\u00e7oit une r\u00e9ponse.<\/li>\najax.php<\/code>: ce fichier appellera l’API pour obtenir le prochain ensemble de r\u00e9sultats \u00e0 condition de renvoyer le maximum de r\u00e9sultats.<\/li>\nindex.php<\/code>: Il contient un formulaire, code pour l’appel Ajax, affiche la liste des vid\u00e9os.<\/li>\n<\/ul>\nDans
config.php<\/code>file, d\u00e9clarons la cl\u00e9 API en tant que variable constante. Nous d\u00e9finissons \u00e9galement la m\u00e9thode d’assistance qui interagit avec les points de terminaison de l’API.<\/p>\nconfig.php<\/strong><\/p>\n
<?php\ndefine('GOOGLE_API_KEY', 'PASTE_YOUR_API_KEY');\n\u00a0\nfunction getYTList($api_url = '') {\n\u00a0\u00a0\u00a0\u00a0$ch = curl_init();\n\u00a0\u00a0\u00a0\u00a0curl_setopt($ch, CURLOPT_URL, $api_url);\n\u00a0\u00a0\u00a0\u00a0curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n\u00a0\u00a0\u00a0\u00a0$response = curl_exec($ch);\n\u00a0\u00a0\u00a0\u00a0$arr_result = json_decode($response);\n\u00a0\u00a0\u00a0\u00a0if (isset($arr_result->items)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $arr_result;\n\u00a0\u00a0\u00a0\u00a0} elseif (isset($arr_result->error)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/var_dump($arr_result); \/\/this line gives you error info if you are not getting a video list.\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\nAssurez-vous de remplacer l’espace r\u00e9serv\u00e9 par la cl\u00e9 API r\u00e9elle. Vous devez \u00e9galement activer l’extension cURL sur votre serveur.<\/p>\n
Cr\u00e9er un formulaire<\/h4>\n
Ensuite, nous avons besoin d’un formulaire simple o\u00f9 nous pouvons entrer l’identifiant de la cha\u00eene YouTube et le nombre de vid\u00e9os \u00e0 renvoyer. L’API YouTube renvoie un maximum de 50 vid\u00e9os \u00e0 la fois.<\/p>\n
index.php<\/strong><\/p>\n
<form method=\"get\">\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"text\" name=\"channel\" placeholder=\"Enter Channel ID\" value=\"<?php if(array_key_exists('channel', $_GET)) echo $_GET['channel']; ?>\" required><\/p>\n\u00a0\u00a0\u00a0\u00a0<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>\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"submit\" value=\"Submit\"><\/p>\n<\/form><\/code><\/pre>\nLors de la soumission du formulaire, j’envoie l’identifiant du canal et max_result par la m\u00e9thode GET. Donc en haut du m\u00eame fichier, j’\u00e9crirai le code comme suit :<\/p>\n
<?php\nrequire_once \"config.php\";\n\u00a0\n$arr_list = array();\nif (array_key_exists('channel', $_GET) && array_key_exists('max_result', $_GET)) {\n\u00a0\u00a0\u00a0\u00a0$channel = $_GET['channel'];\n\u00a0\u00a0\u00a0\u00a0$url = \"https:\/\/www.googleapis.com\/youtube\/v3\/search?channelId=$channel&order=date&part=snippet&type=video&maxResults=\". $_GET['max_result'] .\"&key=\". GOOGLE_API_KEY;\n\u00a0\u00a0\u00a0\u00a0$arr_list = getYTList($url);\n}\n?><\/code><\/pre>\nCe code inclut un fichier de configuration, r\u00e9cup\u00e8re les param\u00e8tres, cr\u00e9e une URL d’API, puis la transmet \u00e0 la m\u00e9thode d’assistance que nous avons cr\u00e9\u00e9e \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente. Pour afficher le r\u00e9sultat ajoutez le code ci-dessous apr\u00e8s votre formulaire.<\/p>\n
Je ne vais pas me concentrer sur la conception d’une liste. L’objectif principal du didacticiel est de r\u00e9cup\u00e9rer des vid\u00e9os YouTube. Je vais l’afficher sous forme de liste.<\/p>\n
<?php\nif (!empty($arr_list)) {\n\u00a0\u00a0\u00a0\u00a0echo '<ul class=\"video-list\">';\n\u00a0\u00a0\u00a0\u00a0foreach ($arr_list->items as $yt) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"<li>\". $yt->snippet->title .\" (\". $yt->id->videoId .\")<\/li>\";\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0echo '<\/ul>';\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (isset($arr_list->nextPageToken)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo '<input type=\"hidden\" class=\"nextpagetoken\" value=\"'. $arr_list->nextPageToken .'\" \/>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo '<div id=\"loadmore\">Load More<\/div>';\n\u00a0\u00a0\u00a0\u00a0}\n}\n?><\/code><\/pre>\nIci, nous parcourons les vid\u00e9os et imprimons le titre et l’identifiant de la vid\u00e9o. Si nous obtenons la valeur de ‘nextPageToken’, nous ajoutons un champ cach\u00e9 et un \u00e9l\u00e9ment Load More. En effet, si vous avez plus de 50 vid\u00e9os sur la cha\u00eene, nous pouvons obtenir le prochain ensemble d’enregistrements en utilisant cette valeur "nextPageToken". Apr\u00e8s cela, nous devons passer un appel Ajax en cliquant sur Charger plus.<\/p>\n
Appel Ajax<\/h4>\n
Lorsque nous cliquons sur Charger plus, il appellera le
ajax.php<\/code>fichier. Ce fichier nous donnera le prochain ensemble d’enregistrements qui s’ajoutera ensuite \u00e0 la liste existante. \u00c9crivez le code JavaScript ci-dessous \u00e0 la fin duindex.php<\/code>fichier.<\/p>\n<script>\nvar httpRequest, nextPageToken;\ndocument.getElementById(\"loadmore\").addEventListener('click', makeRequest);\nfunction makeRequest() {\n\u00a0\u00a0\u00a0\u00a0httpRequest = new XMLHttpRequest();\n\u00a0\u00a0\u00a0\u00a0nextPageToken = document.querySelector('.nextpagetoken').value;\n\u00a0\u00a0\u00a0\u00a0if (!httpRequest) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Giving up: Cannot create an XMLHTTP instance');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0httpRequest.onreadystatechange = function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (this.readyState == 4 && this.status == 200) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var list = JSON.parse(this.responseText);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(var i in list) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(list[i].title != undefined && list[i].id != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var newElement = document.createElement('li');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newElement.innerHTML = '<li>'+ list[i].title +'('+ list[i].id +')<\/li>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.querySelector('.video-list').appendChild(newElement);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(list[list.length-1].nextPageToken != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.querySelector('.nextpagetoken').value = list[list.length-1].nextPageToken;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var loadmore = document.getElementById(\"loadmore\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0loadmore.parentNode.removeChild(loadmore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0httpRequest.open('GET', 'ajax.php?channel=<?php echo $_GET['channel']; ?>&max_result=<?php echo $_GET['max_result']; ?>&nextPageToken='+nextPageToken, true);\n\u00a0\u00a0\u00a0\u00a0httpRequest.send();\n}\n<\/script><\/code><\/pre>\nPour cet article, j’utilise JavaScript vanille pour l’appel ajax et j’ajoute la r\u00e9ponse au DOM. Au fichier ajax, j’envoie les valeurs de l’identifiant du canal, max_result et ‘nextPageToken’.<\/p>\n
Dans le fichier ajax \u00e0 l’aide de ces param\u00e8tres, nous construisons l’URL de l’API. D\u00e8s r\u00e9ception d’une r\u00e9ponse, nous cr\u00e9erons un objet JSON contenant des informations vid\u00e9o et le renverrons. Au JSON final, j’ajoute \u00e9galement une valeur ‘nextPageToken’ pour obtenir le prochain ensemble d’enregistrements lors des appels Ajax suivants.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nrequire_once \"config.php\";\n\u00a0\n$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;\n\u00a0\n$arr_list = getYTList($url);\n\u00a0\n$arr_result = array();\nif (!empty($arr_list)) {\n\u00a0\u00a0\u00a0\u00a0foreach ($arr_list->items as $yt) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array_push($arr_result, ['title' => $yt->snippet->title, 'id' => $yt->id->videoId]);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0if (isset($arr_list->nextPageToken)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array_push($arr_result, ['nextPageToken' => $arr_list->nextPageToken]);\n\u00a0\u00a0\u00a0\u00a0}\n}\n\u00a0\necho json_encode($arr_result);<\/code><\/pre>\nNotre code JavaScript re\u00e7oit cette r\u00e9ponse JSON et ajoute le r\u00e9sultat \u00e0 la liste existante de vid\u00e9os YouTube. Ce processus se poursuit jusqu’\u00e0 ce que nous trouvions la valeur de ‘nextPageToken’.<\/p>\n
J’esp\u00e8re que vous comprenez comment obtenir une liste de vid\u00e9os d’une cha\u00eene YouTube. S’il vous pla\u00eet partager vos pens\u00e9es ou suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n
- \n
- Comment utiliser l’API YouTube pour t\u00e9l\u00e9charger une vid\u00e9o sur la cha\u00eene YouTube<\/a><\/li>\n
- Comment obtenir une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l’aide de l’API de recherche YouTube<\/a><\/li>\n
- Comment ajouter une connexion Google OAuth sur un site Web avec PHP<\/a><\/li>\n<\/ul>\n
- Comment obtenir une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l’aide de l’API de recherche YouTube<\/a><\/li>\n