Suite au précédent tutoriel pour apprendre à faire une galerie vidéo avec l'API javascript de Youtube, voyons maintenant comment prendre en main celle de Dailymotion. Plus simple pour certaines choses, plus compliquée sur d'autres, les deux API se valent...
Mais quel intérêt y'a t'il alors à utiliser l'une ou l'autre ? Tout simplement car vous ne trouverez pas forcément les mêmes vidéos sur les deux services. Le mieux étant bien sûr de faire un système qui permet d'utiliser conjointement les deux.
J'en vous en parlerai bientôt.
Tout comme Youtube, Dailymotion met a disposition une version javascript ainsi qu'une version AS3 de son API. La documentation de l'API javascript est plutôt clair et correctement illustrée. Nous allons nous en servir pour mettre au point notre propre système de VOD.
Dans notre galerie, une vidéo est chargée par défaut, au centre. Un carousel de vidéo défile sur la droite. Un clic sur l'une d'entre-elle la fait s'afficher au centre et lance sa lecture. Le principe est le même que pour la galerie Youtube.
La première étape consiste à charger dans notre page le script SWFobject afin d'insérer proprement le lecteur de Dailymotion. Nous allons donc, avant la fermeture de la balise <head> insérer ces quelques lignes :
Ces quelques lignes de code vont nous permettre d'instancier un peu plus loin, le player Dailymotion.
Pour ce faire, il faut ajouter un élément dans notre page, là où l'on veut que le lecture multimédia apparaisse. Nous lui précisons un ID, afin de l'identifier logique...)
You need Flash player 9+ and JavaScript enabled to view this video.
Directement après, nous ajoutons un script dont le but est de charger le lecteur ET l'API de Dailymotion (via l'URL de la vidéo à charger &enableApi=1&playerapiid=dmplayer).
Ici il faut penser à remplacer xhv8sm par l'ID de la vidéo par défaut, dmapiplayer par l'ID de l'élément html où le lecteur doit être chargé, 650 par la largeur et 365 la hauteur. On ne touche pas au reste.
Si l'on essaye, on constate que la vidéo se charge normalement. On veut maintenant Insérer la liste des autre vidéos disponibles.
Il nous faut récupérer l'URL des miniatures. La méthode est assez simple : http://www.dailymotion.com/thumbnail/video/xhb50w ou xhb50w est l'ID de la vidéo ciblée.
On obtient donc des blocs du type :
Il nous faut aussi le titre des vidéos de notre liste. On va passer par l'API "oembed" du service, qui permet de récupérer des informations diverses sur les vidéos de Dailymotion.
Elle s'utilise via javascript, en appellant une URL qui va nous renvoyer un paquet d'information sous la forme JSON. Pour parser le contenu et afficher ce qui nous intéresse, on va ajouter a notre dernier script un nouvelle fonction :
function jsfunction(data){
document.writeln( data.title ); //on va récupérer le titre
}
.. et bien sûr lier cela à nos miniatures. Dans chacune, insérer (en remplacant "xf2i1y" par l'ID de la vidéo) :
Lorsque le code sera exécuté, le titre s'affichera entre les balises et
Maintenant la dernière étape : il faut qu'au clic sur une miniature, la vidéo se charge, à la place de la vidéo par défaut. On souhaiterai aussi que la lecture débute immédiatement.
Pour cela on a juste à ajouter un argument à la balise <a> des vignettes :
onclick="dmplayer.loadVideoById(rel);"
Notre galerie vidéo est maintenant pleinement fonctionnelle. Tous les éléments nécessaires à sa réalisation se trouvent dans le code source de la démonstration.
N'hésitez pas à l'explorer
La prochaine fois nous verrons comment il est possible de réaliser une gallerie de VOD via l'API de vimeo
A très vite donc !