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.

updated on 26 August 2014

Discussion

6 discussions

  • 1

    Bonjour, je cherche à récupérer l’image d’une vidéo. Ce faisant, j’ai créer un champs extra dans spip qui permet aux auteurs de ne renseigner que le nom de la vidéo, c’est-à-dire que pour cette url
    https://www.youtube.com/watch?v=4FGAFNIyVoE l’auteur n’a qu’à renseigner 4FGAFNIyVoE dans le champ dédié. En revanche, je galère pour récupérer l’image de la vidéo. Pourriez vous m’aider ?

    • hello,

      Dans le code donné en exemple, c’est cette partie qui renvoie la miniature :

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

      Ce qui peut être simplifié de la sorte (en mettant une clé pour l’API bien sûr) :

      <BOUCLE_youtube(DATA)
      	{source json,#VAL{'https://www.googleapis.com/youtube/v3/videos?key=xxx&part=snippet&id=kZ3M6ko9pes'}}
      	{datapath /items}
      	{0,1}
      >
      [<img src="(#VALEUR{snippet/thumbnails/default/url})" alt="">]
      </BOUCLE_youtube>

      Il y a plusieurs tailles possibles :
      * default
      * medium
      * high
      * standard

    Reply to this message

  • 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.

    Reply to this message

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

    Reply to this 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.

    Reply to this 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

    Reply to this 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.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom