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?
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.
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.
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>
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.
vous pouvez plutôt vous tourner vers des ressources telles que http://www.houndbite.com/ pour gérer l'audio.
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:
bibliothèque a le soutien pour les sélections et autorendering PHP donné L'URL de la vidéo et les options de configuration.
Plus simple que cela.
<iframe width="0" height="0" src="https://www.youtube.com/embed/youtubeID?rel=0" ></iframe>