Jeudi 28 Mars 2024
taille du texte
   
Jeudi, 31 Août 2017 06:44

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

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('');


Last modified on Jeudi, 31 Août 2017 06:54
French (Fr)English (United Kingdom)

Parmi nos clients

mobileporn