Extraire l'image d'une vidéo YouTube

Sommaire

Principe de fonctionnement et API YouTube
Télécharger l'outil pour une utilisation locale
Utiliser l'outil en ligne d'extraction de l'image

Information

Rédigé par Antoine

Publié le 2023-10-17

Modifié le 2023-10-17

493 affichages

4 likes

0 non-like

Principe de fonctionnement pour extraire l'image d'une vidéo YouTube

Il n'est pas nécessaire d'installer un logiciel particulier pour récupérer l'image de garde d'une vidéo YouTube ; YouTube fournit tout ce dont on a besoin.

YouTube dispose de plusieurs API, ou Interface de Programmation Applicative ; l'une d'entre elle permet d'extraire les images de garde.

L'adresse d'une vidéo Youtube se présente de la manière suivante, où les x correspondent l'identifiant unique de la vidéo :

https://www.youtube.com/watch?v=xxxxxxxx

L'API qui permet d'extraire l'image de garde d'une vidéo YouTube est accessible via plusieurs adresses Web :

https://img.youtube.com/vi/xxxxxxxx/default.jpg
https://img.youtube.com/vi/xxxxxxxx/mqdefault.jpg
https://img.youtube.com/vi/xxxxxxxx/hqdefault.jpg
https://img.youtube.com/vi/xxxxxxxx/sddefault.jpg
https://img.youtube.com/vi/xxxxxxxx/maxresdefault.jpg

Vous pouvez ainsi afficher manuellement les images de garde des vidéos YouTube en 5 tailles :

default.jpg correspond à la miniature.
mqdefault.jpg correspond à une moyenne taille.
hqdefault.jpg correspond à une grande taille.
sqdefault.jpg correspond à une très grande taille.
maxresdefault.jpg correspond à taille maximum.

Télécharger l'outil pour une utilisation locale

Je vous ai concocté un petit script en HTML et JavaScript pour automatiser l'affichage des images de garde de vos vidéos YouTube préférées.

Il s'agit d'un fichier au format HTML qui s'ouvre dans votre navigateur internet.

En voici le code source :

<!DOCTYPE html>
<html data-bs-theme="dark" class="h-100" lang="fr">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Extraire l'image d'une vidéo YouTube</title>
  <meta name="author" content="Antoine - 1FORMATIK.com">
  <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" preload>
  <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" preload>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
 </head> 
 <body class="bg-dark text-light d-flex flex-column h-100">
  <div class="container-xxl">
   <div class="row mt-5">
    <div class="col-md-12 text-center">
     <div class="rounded shadow p-3">
      <div class="row">
       <div class="col-md-12">
        <p class="h3 mb-4"><i class="h3-svg fa-solid fa-file"></i> Outil en ligne pour extraire et récupérer l'image d'une vidéo YouTube</p>
        <p>Collez ci-dessous l'adresse de la vidéo YouTube pour en extraire l'image de garde.</p>
        <p>Cliquez ensuite sur le bouton pour afficher et télécharger l'image de la vidéo ; celle-ci vous sera proposée en plusieurs tailles.<p/>
        <p><input type="text" class="form-control" id="url" placeholder="Adresse de la vidéo Youtube (exemple: https://www.youtube.com/watch?v=JxuEyS-yT-I)"></p>
        <p class="text-end"><button class="btn btn-secondary mt-3" type="button" onclick="recupImage();"><i class="fa-solid fa-play"></i> Extraire l'image de la vidéo</button></p>
       </div>
      </div>
     </div>
     <div class="text-center"><i class="fa-solid fa-arrow-down fa-2x m-1 arrow-to-code"></i></div>
     <div class="rounded shadow p-3">
      <div class="row">
       <div class="col-md-12" id="image"></div>
      </div>
     </div>
     <script>
     function recupImage(){
      var url = document.getElementById("url").value;
      if (url.indexOf("v=") !== -1)
      {
       var id = url.split('v=')[1]; 
       if (id.indexOf("&") !== -1)
       {  
        var id = id.substr(0, id.indexOf('&'));
       }
       if ((id.match("[0-9A-Za-z-]")) && (id.indexOf("<") === -1) && (id.indexOf(">") === -1) && (id.indexOf("%") === -1) && (id.indexOf(".") === -1))
       {
        document.getElementById("image").innerHTML = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg' alt='' class='img-fluid'><br><img src='https://img.youtube.com/vi/" + id + "/mqdefault.jpg' alt='' class='img-fluid'><br><img src='https://img.youtube.com/vi/" + id + "/hqdefault.jpg' alt='' class='img-fluid'><br><img src='https://img.youtube.com/vi/" + id + "/sddefault.jpg' alt='' class='img-fluid'><br><img src='https://img.youtube.com/vi/" + id + "/maxresdefault.jpg' alt='' class='img-fluid'><br><br>";
       }
      }
     }
     var input = document.getElementById("url");
     input.addEventListener("keyup", function(event)
     {
      if (event.keyCode === 13)
      {
      event.preventDefault();
      recupImage();
      }
     });
     </script>
    </div>
   </div>
  </div>
 </body>
</html>

Cliquez sur le lien ci-contre pour télécharger l'outil dont vous avez la démonstration ci-dessous. Une fois le fichier HTML téléchargé, il vous suffit de double cliquer dessus pour l'ouvrir dans votre navigateur internet.

Télécharger

Outil en ligne pour extraire et récupérer l'image d'une vidéo YouTube

Collez ci-dessous l'adresse de la vidéo YouTube pour en extraire l'image de garde.

Cliquez ensuite sur le bouton pour afficher et télécharger l'image de la vidéo ; celle-ci vous sera proposée en plusieurs tailles.

Ce contenu vous a-t-il été utile ?

Autres publications dans la catégorie <youtube>