Tutorial API Youtube : rechercher et afficher des videos (PHP et JQuery)

Tutoriel API Youtube

J’ai eu très récemment l’occasion de travailler sur l’API de Youtube. Cette API, évidemment fourni par Google, est très complète et peut permettre beaucoup d’interactions avec Youtube (recherche et visionnage de vidéos, upload, login, …). La documentation fourni par Google est, comment dire, un peu fouilli et pas très claire.

Je vais néanmoins te partager mes découvertes en proposant un tutorial pour rechercher des vidéos sur Youtube, afficher les résultats (sous forme de miniature) et lire les vidéos.

Demo Api Youtube

Comme d’hab, j’ai préparé une démo de ce tutorial (démo hébergée chez mon employeur car mon hébergement 1&1 n’est pas PHP 5). Comme c’est du PHP, j’ai également prévu le téléchargement des sources de la démo.

Tout d’abord il est absolument nécessaire d’avoir un serveur PHP 5.2 au minimum. Il faut également télécharger un standalone du framework PHP zend, GData qui contient les fichiers nécessaires au fonctionnement de l’API. Enfin pour juste effectuer des recherches et afficher des vidéos, il n’est pas nécessaire d’avoir une key pour l’API Youtube.

Dans le .zip de GData, il y a un dossier « librairy » dans lequel on retrouve un dossier « Zend », c’est celui-là qu’il faut uploader à la racine de ton site.

Jetons maintenant un oeil au code :

Le principe est le suivant : on fait une requête (en utlisant les objets mis à disposition par l’API) et on récupère et on traite les informations à partir du flux XML retourné (voir la liste des infos disponible).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
require_once 'Zend/Gdata/YouTube.php'; // on charge la librairie YouTube
 
$yt = new Zend_Gdata_YouTube(); // on initialise l'objet Youtube
$yt->setMajorProtocolVersion(2);
$query = $yt->newVideoQuery();
$query->setOrderBy('relevance'); // les vidéos sont classées par pertinence
$query->setTime('all_time'); // on souhaite afficher les vidéos qui ont été ajoutées n'importe quand
$query->setVideoQuery("fat freddy's drop"); // on définit la recherche
 
// on récupère un flux XML avec la liste des vidéos
$flux = $yt->getVideoFeed($query->getQueryUrl(2));
 
// on affiche les miniatures 
get_results($flux);

La fonction get_results() est une fonction permettant de parcourir le flux XML des résultats pour le traitement des informations. Cette fonction appelle elle-même la fonction afficheMiniature() qui permet d’afficher les miniatures des vidéos. Ici, je stoppe le listing des résultats à 6, mais on peut en afficher jusqu’à 25.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/******** FONCTIONS POUR L'API YOUTUBE ********/
// On recupère l'url du player flash et une miniature de la video (format 120*90)
// et on affiche la miniature en mettant l'url du player en id (pour le récupérer avec JQuery après)
function afficheMiniature($video)
{
	$miniature = $video->getVideoThumbnails();
	echo '<img class="videoThumb" id="'. $video-/>getFlashPlayerUrl() .'" src="' . $miniature[0]['url'].'" alt="" />';
}
 
// fonction permettant de parcourir les vidéos provenant d'un flux
function get_results($videos)
{
	    $count = 1;
	    foreach ($videos as $video) {
		afficheMiniature($video);
		if($count==6)
			break;
		$count++;
	    }
}

Enfin, j’ai ajouté un petit code JQuery pour permettre l’affichage d’un seul player flash (s’il y en a plusieurs sur une page, celle-ci peut galérer un peu) et de changer la vidéo lorsque l’on clique sur une miniature. Par défaut (au chargement de la page) on affiche la première vidéo.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready( function () {
	/* ##########
		AFFICHAGE DYNAMIQUE DES VIDEOS
	########## */
	if($("#lectureVideo")) // afficher une video au chargement de la page si le div ayant pour id lectureVideo
	{
		var urlVideo = $("img.videoThumb:first").attr("id");
		$("#lectureVideo").html('<object width="360" height="300"><param name="movie" value="'+urlVideo+'&color1=0x2193bd&color2=0x2193bd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+urlVideo+'&color1=0x2193bd&color2=0x2193bd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="300"></embed></object>');
	}
	$("img.videoThumb").click( function() { // si on clique sur une miniature on affiche la vidéo dans le bloc ayant pour id "lectureVideo"
		$("#lectureVideo").html('<object width="360" height="300"><param name="movie" value="'+$(this).attr("id")+'&color1=0x2193bd&color2=0x2193bd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+$(this).attr("id")+'&color1=0x2193bd&color2=0x2193bd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="300"></embed></object>');
	});
});

Pour voir la structure HTML que j’ai utilisé, je t’invite à regarder le code de la démo (CTRL+U sous firefox). C’est à toi de jouer maintenant ! :D

Toute la code officielle est disponible ici.

Cette entrée a été publiée dans JQuery, PHP, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

16 reponses a Tutorial API Youtube : rechercher et afficher des vidéos (PHP et JQuery)

  1. rudolph dit :

    Bonjour Arnaud et merci pour ce tutoriel.

    J’ai essayé de le mettre sur mon blog à http://manga.actus-web.com/nicky-larson/ pour le tester mais comme tu peux le voir sur le site tout le code n’a pas été pris, sais tu pourquoi ça bloque là STP ?

    setMajorProtocolVersion(2); ?>
    newVideoQuery(); ?>
    setOrderBy(’relevance’); ?>
    setTime(’all_time’); ?>
    setVideoQuery(”Nicky Larson fr”); ?>
    getVideoFeed($query->getQueryUrl(2)); ?>

    getVideoThumbnails(); ?>

    Merci pour ton aide

  2. arnaud dit :

    Euh je pense pas que ça puisse fonctionner en le mettant dans le contenu d’un billet d’un. Il faut mettre le code dans un fichier php directement.

  3. rudolph dit :

    merci et ensuite je l’appelle avec ca :

    fichier c’est le fichier.php

    merci

  4. rudolph dit :

    le php ne s’est pas affiché :

  5. rudolph dit :

    get_fichier()

  6. arnaud dit :

    Le PHP c’est plus compliqué que ça. Je pense que tu ne peux pas intégrer du PHP comme ça dans un blog.

    Il pourrait être possible de l’intégrer dans la sidebar par exemple en changeant directement le code du fichier de la sidebar, mais il faut avoir un minimum de connaissances en PHP.

    Salutations,

  7. bachir dit :

    merci pour votre script, je l’ai testé, il marche bien. mais si je l’utilise dans joomla (dans un module) le site plante (je pense que joomla n’ai pas compatible avec Zend …)
    merci si vous avez une réponse à ce problème
    Bien cordialement

  8. Au début de ton article tu dis que la démo de ton article est hébergée chez ton employeur car ton hébergement 1&1 n’est pas PHP 5″. Si tu es en hébergement Linux (car c’est le cas que je connais), il est vrai que par défaut tu es en PHP 4.
    Il suffit de rajouter « AddType x-mapp-php5 .php » dans un .htaccess pour passer en PHP 5.

  9. Stoff dit :

    Merci pour ce tutorial, c’est vrai la doc officielle est un vrai bordel!

  10. David dit :

    Il ne faudrait néanmoins pas croire que l’API youtube nécessite forcément PHP. Loin de là, c’est tellement différent ( serveur / client ).
    http://www.tayo.fr/youtube-api–seekto-changer-le-temps-dune-video-aide.php

  11. Diégo dit :

    Merci pour l »info

  12. musicuser dit :

    Bonjour et merci pour ces explications. De quelle manière peut-on interroger une playliste pour rapatrier toutes les vidéos qu’elle contient sur une page ?

  13. Mathieu dit :

    Merci Arnaud pour ce tutoriel.

    Cependant, je ne comprend pas à quel endroits il faut mettre ces vidéos.

    ‘Zend/Gdata/YouTube.php’; // on charge la librairie YouTube comment on fait?

    // on récupère un flux XML avec la liste des vidéos
    $flux = $yt->getVideoFeed($query->getQueryUrl(2));
    ???
    Merci

  14. Jeanluco dit :

    Merci de ce tutoriel très intéressant pour appréhender rapidement l’API. J’ai modifié le code pour éviter le jQuery, que j’ai toujours du mal à comprendre, par un simple javascript.

    ajout de onclick=affichevideo () en modifiant la fonction affiche Miniature() ci-dessous:

    function afficheMiniature($video)
    {
    $miniature = $video->getVideoThumbnails();
    echo ‘getVideoId().’ ») id= »‘. $video->getFlashPlayerUrl() .’ » src= »‘ . $miniature[0]['url'].’ » alt= »" />’;
    }

    et la fonction javascript affichevideo() en début à la place du jQuery

    function afficheVideo(video)
    {
    document.getElementById(‘lectureVideo’).innerHTML=  »;
    }

  15. Jeanluco dit :

    Désolé le code de mon message précédent a été tronqué sur certains caractères spéciaux.
    En résumé, j’ai ajouté un onclick=afficheVideo($video->getVideoId()) et dans la fonction javascript je mets la zone objet du début dans document.getElementById(‘lectureVideo’).innerHTML.
    Je peux l’envoyer par email pour ceux que ça intéresse. C’est plus court et le fonctionnement est identique.

  16. ReBleach dit :

    Bonjour,

    Très bonne mise en bouche. Cependant l’exemple renvoie sur une page 404, du coups plus de structure HTML…

    Bonne journée.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>