11

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

le 5 juin 2009

tags tags : , , ,

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.

tags catégorie : JQuery, PHP