Boucle (DATA) avec l’API Youtube

Les boucles (DATA) et les itérateurs sont bien pratiques. Ils vont permettre à Spip de boucler sur des sources externes à la base de données du site (fichiers externes, API, etc...).

Voila un exemple de boucle pour lister les dernières vidéos (ici les 2 dernières) d’une chaine Youtube, en utilisant l’api Google Youtube V3 et la boucle DATA.

Pré-requis :

Bon à savoir : L’API Youtube retourne des objets au format Json, on va donc utiliser l’itérateur du même nom.

La boucle « BOUCLE_youtube » va retourner les 2 dernières vidéos de la chaine Youtube. Dans la source, il faut remplacer CLE_API_GOOGLE par votre cle API Google et ID_CHAINE_YOUTUBE par l’identifiant de la chaine Youtube.

La boucle « BOUCLE_youtube_details » va retourner toutes les infos sur une vidéos (miniature, titre, durée...). Dans la source, il faut remplacer CLE_API_GOOGLE par votre cle API Google.

<B_youtube>
<ul>
    <BOUCLE_youtube(DATA)
     {source json,'https://www.googleapis.com/youtube/v3/search?key=CLE_API_GOOGLE&channelId=ID_CHAINE_YOUTUBE&part=id&order=date&maxResults=2'}
     {datapath /items}
     {0,2}
    >
    <li>
    	<BOUCLE_youtube_details(DATA){source json,#VAL{'https://www.googleapis.com/youtube/v3/videos?key=CLE_API_GOOGLE&part=snippet,contentDetails&id='}|concat{#VALEUR{id}|get_object_vars|table_valeur{videoId}}}
        {datapath /items}
     	{0,1}
     	>
        <ul>
          	[<li class="video_image"><a href="http://www.youtube.com/watch?v=#VALEUR{id}" rel="external"><img src="(#VALEUR{snippet}|get_object_vars|table_valeur{thumbnails}|get_object_vars|table_valeur{standard}|get_object_vars|table_valeur{url})" alt="" /></a></li>]
            [<li class="video_titre">(#VALEUR{snippet}|get_object_vars|table_valeur{title})</li>]
            <li class="video_duree">[(#VALEUR{contentDetails}|get_object_vars|table_valeur{duration}|match{(\d+)H}|replace{'H',''}):][(#VALEUR{contentDetails}|get_object_vars|table_valeur{duration}|match{(\d+)M}|replace{'M',''})][:(#VALEUR{contentDetails}|get_object_vars|table_valeur{duration}|match{(\d+)S}|replace{'S',''})]</li>
        </ul>
        </BOUCLE_youtube_details>
    </li>
    </BOUCLE_youtube>
</ul>
</B_youtube>
<//B_youtube>

Comme l’API retourne des objets et non des tableaux, on est obligé de passer par la fonction php get_object_vars() pour récupérer les valeurs.

Les informations sur le format des données retournées est disponible ici : https://developers.google.com/youtube/v3/docs/videos

Attention : il faut avoir l’extension Php Openssl activé sur votre serveur.

Dernière modification de cette page le 26 août 2014

Discussion

5 discussions

  • 1

    Bonjour, cela fonctionne en effet très bien mais que doit-on adapter pour non pas reprendre le contenu d’une chaîne mais d’une playlist ? Merci.

    Répondre à ce message

  • Excellent ! Marche très bien. Merci pour cette contribution très utile et pour les modifications concernant get_object_vars().

    Répondre à ce message

  • Remarquable contribution pour comprendre l’utilisation concrète des boucles DATA, et très bonne remarque de eidôlon concernant les get_object_vars. Le code fonctionne nickel.

    Répondre à ce message

  • eidôlon

    Salut, merci pour l’exemple j’ai dû faire les modifications suivantes pour le faire fonctionner :

    -  suppression des get_object_vars()
    -  la ligne

    1. <img src="(#VALEUR{snippet}|get_object_vars|table_valeur{thumbnails}|get_object_vars|table_valeur{standard}|get_object_vars|table_valeur{url})" alt="" />

    devient

    1. [<img src="(#VALEUR{snippet}|table_valeur{thumbnails}|table_valeur{high}|table_valeur{url})" class="img-responsive" alt="" />]

    valeurs possibles pour thumbnails : object

    Valid key values are :
    default – The default thumbnail image for this resource. The default thumbnail for a video – or a resource that refers to a video, such as a playlist item or search result – is 120px wide and 90px tall. The default thumbnail for a channel is 88px wide and 88px tall.
    medium – A higher resolution version of the thumbnail image. For a video (or a resource that refers to a video), this image is 320px wide and 180px tall. For a channel, this image is 240px wide and 240px tall.
    high – A high resolution version of the thumbnail image. For a video (or a resource that refers to a video), this image is 480px wide and 360px tall. For a channel, this image is 800px wide and 800px tall.

    API YouTube

    Répondre à ce message

  • Excellent article !!! Merci !

    Je chercher à faire un truc un peu plus sioux, je voudrais faire un peu comme le système de syndication c’est à dire proposer de créer des articles à chaque nouvelle vidéo postée sur une chaine Youtube

    Une idée de comment faire cela ?

    Merci d’avance.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom