API clients web - tierces

Exemple d’une API tierce : YouTube

L’API de YouTube est une API tierce qui permet de récupérer des vidéos, des playlists, des chaînes, etc.

Voyons le code Javascript pour afficher une vidéo YouTube, extrait de la documentation officielle de YouTube.

youtube.js

// Source: https://developers.google.com/youtube/iframe_api_reference

// 1. The script will look for a div with the id "player" and replace it with an iframe containing the video player.

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', { // The ID of the div element that will contain the player
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        playerVars: {
            'playsinline': 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    // event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}

function playVideo() {
    player.playVideo();
}

function pauseVideo() {
    player.pauseVideo();
}

function stopVideo() {
    player.stopVideo();
}

Dans la page HTML, on devra ajouter un élément <div> pour afficher la vidéo, puis on pourra ensuite ajouter des boutons pour contrôler la lecture de la vidéo.

index.html

<div id="player"></div>

<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>

Résultat :

PlayPauseStop

Conclusion

• Les API tierces sont des outils puissants qui permettent d’ajouter des fonctionnalités à nos applications web.
• Elles sont souvent bien documentées, et permettent de réaliser des opérations complexes avec un minimum d’effort.
• Il est important de bien comprendre le fonctionnement de ces API, et de respecter les conditions d’utilisation qui leur sont associées.