Un exemple JavaScript pour extraire les informations du nouvel affichage de youtube

Jeudi, 31 Août 2017 06:44

Un exemple JavaScript pour extraire les informations du nouvel affichage de youtube

font size decrease font size increase font size
Imprimer
E-mail

Hier, Youtube a modifié sa mise en page ce qui a provoqué le bloquage de tous les modules et scripts exploitant l'ancien affichage.

WebDesign Un exemple JavaScript pour extraire les informations du nouvel affichage

Et si cette "mauvaise" nouvelle pour beaucoup de développeurs pouvait révéler autre chose.

Après quelques recherches, il apparait qu'avec la nouvelle interface, toutes les informations se trouvent dans un seul objet "Window.ytInitialData".

Même si cela va demander un peu de travail pour les développeurs de modules, la manipulation des données extraites va être beaucoup plus simple et plus facile.

Voici un exemple de code qui vous permet de créer une liste en moins d'une seconde :


document.body.innerHTML = [].concat.apply([], window.ytInitialData.contents.twoColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents
      .map(content => content.itemSectionRenderer.contents[0].shelfRenderer.content.gridRenderer.items
          .map(e => e.gridVideoRenderer)
          .filter(e => typeof e.isWatched === 'undefined' &&
              (e.thumbnailOverlays.filter(overlays => typeof overlays.thumbnailOverlayResumePlaybackRenderer !== 'undefined' &&
                  overlays.thumbnailOverlayResumePlaybackRenderer.percentDurationWatched > considerVideosWatchedAfter).length == 0)))
  ).map(v => ({
      'thumbnail': v.thumbnail.thumbnails[v.thumbnail.thumbnails.length - 1].url,
      'url': `https://www.youtube.com/watch?v=${v.videoId}`,
      'viewcount': v.shortViewCountText.simpleText,
      'runtime': typeof v.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer !== 'undefined' ? v.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text.simpleText : typeof v.thumbnailOverlays[1].thumbnailOverlayTimeStatusRenderer !== 'undefined' ? v.thumbnailOverlays[1].thumbnailOverlayTimeStatusRenderer.text.simpleText : '',
      'published': v.publishedTimeText.simpleText,
      'uploader': v.shortBylineText.runs[0].text
  })).map(v =>
      `<div style="display:inline-block; overflow:hidden; margin:0px;padding:0px;height:${imagesize}px">
                                <a style="overflow:hidden;" href="/${v.url}"><img src="/${v.thumbnail}" style='height:${imagesize}px;overflow:hidden;' /></a>
                                <p style="position:relative;top:-35px; left:5px; overflow:hidden; display:table-cell; background-color:rgba(0, 0, 0, 0.5); color:white; font-size:22px;">${v.uploader.substring(0,7)} : ${v.runtime}</p>
                                </div>`).join('');