Télécharger facilement les vidéos de Noovo.ca (bookmarklet)

À vos bookmarklets. Prêt? Téléchargez.

Première étape: Installer le bookmarklet

Il vous suffit de glisser et déposer le bouton qui se trouve juste ici-bas intitulé Noovo DL dans votre bar de bookmarks (signets).

Noovoo DL

Deuxième étape: Choisir sa vidéo et afficher les liens à télécharger

Il faut désormais simplement choisir sa vidéo en se rendant sur une page offrant un player pour ensuite cliquer sur le bookmarlet. Une fois le bookmarklet exécuté, une liste de fichiers à télécharger s'offrira à vous en haut de la page. Ce n'est pas le plus beau design au monde, mais ça fonctionne.

Troisième étape: Choisir la résolution et sauvegarder

Pour télécharger la résolution voulue, il ne suffit que de cliquer avec le bouton droit de la souris et Enregistrer sous...
Voilà! Pas plus compliqué que ça.

Explications techniques

Brightcove Playback API utilisé différemment

Noovo utilise encore et toujours BrigthCove comme fournisseur de diffusion de vidéos cependant ils ont changé la façon d'utiliser leur API. Brightcove offre désormais une protection supplémentaire en demandant au site tel que Noovo.ca d'injecter un token dans un header HTTP standard.
Le header en question est Accept. C'est un peu étrange, mais ils expliquent la raison dans leur documentation.

Code et explications

$.getJSON('http://api.noovo.ca/api/v1/pages/single-episode/'+window.location.href.split('/').splice(-2).join('/'), function(resp) {
    brightcoveId = resp.data.brightcoveId
    if (brightcoveId == undefined) {
        brightcoveId = resp.data.contents[0].brightcoveId
    }
    $.ajaxSetup({
        headers : {
            'Accept' : 'application/json;pk=super_long_secret_token'
        }
    });
    $.getJSON('https://edge.api.brightcove.com/playback/v1/accounts/618566855001/videos/'+brightcoveId, function(resp) {
        html = '<div style="background-color: white; padding-bottom: 30px"><h1>Download:</h1><ul>'
        for (i in resp.sources) {
            if (resp.sources[i].hasOwnProperty('src') && resp.sources[i].container == 'MP4') {
                url = resp.sources[i].src
                html += '<li>' + resp.sources[i].height + 'p: <a href="' + url + '">' + url + '</a></li>'
            }
        }
        html += '</ul></div>'
        $('body').prepend(html)
    });
});

Quelques explications:

1. Le script utilise JQuery car Noovo.ca utilise déjà celui-ci sur leur site et ça simplifie la vie pas mal.
2. Les URLs utilisés pour trouver l'information ont été découverts en regardant les requêtes à l'aide de la console (F12.
3. Aucune gestion d'erreur n'est faite. Ça ne passerait pas une revue de code, mais bon… pardonnez-moi.
   Étape par étape:
4. Le script prend l'URL de la page en cours et extrait le nom du show et épisode de celui-ci pour obtenir le brightcoveId nécessaire (grâce à l'API de Noovo)
   1. Par exemple, pour http://noovo.ca/videos/ca-va-brasser/riverbend-alma_89971
   2. On extrait ca-va-brasser/riverbend-alma_89971
   3. On appelle l'API de Noovo: http://api.noovo.ca/api/v1/pages/single-episode/ca-va-brasser/riverbend-alma_89971
   4. On essaye de trouver le brightcoveId (identifiant unique de la vidéo) dans le JSON retourné.
5. On prépare JQuery pour injecter le Policy Key dans le header Accept
   1. Si ce token n'est pas injecté, nous allons malheureusement obtenir une erreur de sécurité retournée par Akamai
   2. Akamai est le fournisseur CDN officiel de BrightCove
6. On appelle l'API de BrigthCove en utilisant le brigthcoveId
7. On boucle la réponse JSON pour trouver les sources téléchargeables.
8. On imprime en haut de page une liste des liens pour le téléchargement.