Comment ne lire que l'audio D'une vidéo Youtube en utilisant HTML 5?

est-il possible de ne lire que l'audio d'une vidéo YouTube en utilisant HTML 5 et Javascript?

23
demandé sur nbro 2011-12-31 23:56:29

7 réponses

intégrer le lecteur vidéo et utiliser CSS pour cacher la vidéo. Si vous le faites correctement, vous pouvez même être en mesure de masquer uniquement la vidéo et pas les commandes ci-dessous.

cependant, je recommande contre, parce que ce sera un violation de l' YouTube TOS. Utilisez votre propre serveur à la place si vous voulez vraiment jouer uniquement audio.

13
répondu Tom van der Woerdt 2013-01-09 06:22:13

vous pouvez analyser le méta-fichier Youtube pour tous les flux disponibles pour cette vidéo en particulier id en utilisant ce lien:https://www.youtube.com/get_video_info?video_id={VID} et extraire les flux audio seulement.

voici un exemple avec public CORS proxy:

var vid = "3r_Z5AYJJd4",
  audio_streams = {};

$.get('https://cors-anywhere.herokuapp.com/https://www.youtube.com/get_video_info?video_id=' + vid, function(data) {
  var data = parse_str(data),
    streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(',');
  console.log(streams);
  $.each(streams, function(n, s) {
    var stream = parse_str(s),
      itag = stream.itag * 1,
      quality = false;
    console.log(stream);
    switch (itag) {
      case 139:
        quality = "48kbps";
        break;
      case 140:
        quality = "128kbps";
        break;
      case 141:
        quality = "256kbps";
        break;
    }
    if (quality) audio_streams[quality] = stream.url;
  });
  console.log(audio_streams);
  $("#youtube").attr({
    src: audio_streams['128kbps']
  });
});

function parse_str(str) {
  return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="youtube" autoplay controls loop></audio>

ne fonctionne pas pour toutes les vidéos, dépend beaucoup des paramètres de monétisation ou quelque chose comme ça.

11
répondu 350D 2017-07-28 13:39:32

C'est peut-être un vieux post mais les gens pourraient toujours être à la recherche de ce si ici vous allez:

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300" 
  src="https://www.youtube.com/embed/youtubeID?rel=0">
</iframe>
</div>
</div>
6
répondu Richard Waterworth 2013-05-16 20:55:14

La réponse est simple: Utilisez un produit tiers comme jwplayer ou similaire, ensuite, définissez la taille minimale du lecteur qui est la taille du lecteur audio (affiche seulement les commandes du lecteur).

Voila.

Je l'utilise depuis plus de 8 ans.

4
répondu shindiggah 2012-10-08 21:20:52

vous pouvez plutôt vous tourner vers des ressources telles que http://www.houndbite.com/ pour gérer l'audio.

1
répondu dangerChihuahua007 2011-12-31 20:18:23

ajoutant aux mentions de jwplayer et aux violations possibles de TOS, je voudrais faire un lien vers le dépôt suivant sur github:YouTube Lecteur Audio Génération De La Bibliothèque, qui permet de générer la sortie suivante:

enter image description here

bibliothèque a le soutien pour les sélections et autorendering PHP donné L'URL de la vidéo et les options de configuration.

0
répondu berezovskyi 2015-10-26 15:24:28

Plus simple que cela.

<iframe width="0" height="0" src="https://www.youtube.com/embed/youtubeID?rel=0" ></iframe>
-2
répondu Felipe 2015-07-27 16:38:26