Sa galerie VOD avec l’API Dailymotion

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 !

Auteur : willy Bahuaud

Webdesigner et créateur de webTV.
Intégrateur Wordpress

32 pensées sur “Sa galerie VOD avec l’API Dailymotion”

  1. Bonjour, merci pour ce tuto.
    Apres plusieurs test, il semblerait que tu ais oublié de préciser qu’il fallait rajouter un attribut rel= » » avec l’ID de la vidéo dans la balise .

  2. J’avais essayé une intégration similaire quand je travaillais pour le site du Puys du Fou mais à l’époque l’API de Dailymotion n’était pas encore au point…

    David

  3. Bonjour, j’ai besoin de faire une maquette de ma WebTV pour présenter à mes commanditaires. Existe-t-il une version de démonstration que je pourrais utiliser?

  4. Merci beaucoup pour un article tres interessant. J’ai partage votre article avec mes amis sur facebook. J’attends des nouveaux articles et je vous souhaite bon chance!

  5. Just needed you to know I have added you to my bookmarks. I’ve seen your different weblog subjects too and I think you’ve got got great ideas. Preserve it going!

  6. Bonjour!
    Je tiens un blog sur le thème des animaux depuis pas mal de temps maintenant. Je pense que quelques vidéos pour lui donner un peu de vie et de dynamisme seraient les bienvenues. Surtout que les vidéos sur les animaux sont toujours un plaisir à regarder! En tout cas, cette façon de les présenter me semble organisée et très intuitive. Je me lance, nous verrons bien!

  7. Bonjour)) je regarde souvent par le biais de ce site. Il ya toujours quelque chose à lire. Cet article est très intéressant, et je suis entièrement d’accord avec l’auteur

  8. Augusta Green Blazers Looking for something different for your next tournament or corporate promotion. Now you can present the winner of your next tournament with our beautiful JacketMaster Championship Green Blazer Jacket. Add one our championship patches to personalize your event. From Fantasy Football to Fishing Champion, we’ve got you covered.

Laisser un commentaire

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