2010-03-19 5 views
12

Quelle est la meilleure façon d'obtenir le titre de la vidéo youtybe, par exemple le titre de la vidéo:Obtenir le titre de la vidéo sur youtube avec jQuery en utilisant youtube api

http://www.youtube.com/watch?v=Wp7B81Kx66o

Merci!

+1

Jetez un oeil à ceci: [Comment obtenir miniature de lien vidéo YouTube en utilisant l'API YouTube] (http://stackoverflow.com/questions/2068344/how-to- get-thumbnail-of-youtube-video-link-using-youtube-api/2108248 # 2108248). Il dit thumbnail mais à peu près toutes les informations disponibles publiquement sur une vidéo peuvent être récupérées. –

Répondre

15

Utilisez jQuery's JSON appel à l'API YouTube pour obtenir les résultats en arrière et ensuite utiliser jQuery pour mettre les résultats où vous je les veux. Vous pouvez utiliser l'onglet NET de firebug pour vous assurer que vos requêtes/réponses reviennent correctement, puis utilisez console.log() pour vous assurer que vous avez correctement analysé la réponse.

par ex. URL:

GET https://gdata.youtube.com/feeds/api/videos/(the-video-id)?v=2&alt=json

Plus d'infos:

YouTube API for a specific video

Developer's Guide: JSON/JavaScript

+6

ne fonctionne plus –

+0

Ceci est l'API YouTube v2 qui a été obsolète, @AlexC s'il vous plaît mettre à jour à la réponse ci-dessous si vous le trouvez correct –

4

Essayez ceci:

<script type="text/javascript"> 
function showMyVideos(data) { 
    var feed = data.feed; 
    var entries = feed.entry || []; 
    var html = ['<ul>']; 
    for (var i = 0; i < entries.length; i++) { 
    var entry = entries[i]; 
    var title = entry.title.$t; 
    html.push('<li>', title, '</li>'); 
    } 
    html.push('</ul>'); 
    document.getElementById('videos').innerHTML = html.join(''); 
} 
</script> 

et dans votre partie du corps:

<body> 
<div id="videos"> 
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos"> 
</script> 
</div> 
</body> 
-2

Essayez ceci pour montrer l'image caractéristique Youtube en face de vue de la liste Jquery.

<script> 
function showMyVideos(data) { 
    var feed = data.feed; 
    var entries = feed.entry || []; 
    var html = ['<ul data-role="listview">']; 
    for (var i = 0; i < entries.length; i++) { 
     var entry = entries[i]; 
     var title = entry.title.$t; 
     var feature = entry.content.$t.substring(entry.content.$t.indexOf("src=")+5); 
     feature = feature.substring(0,feature.indexOf('"')); 
     html.push('<li><img src="' ,feature , '" />' , title , '<p>' , feature, '</p></li>'); 
    } 
    html.push('</ul>'); 
    document.getElementById('videos').innerHTML = html.join(''); 
} 
</script> 

<div id="videos"> 
<script 
src="http://gdata.youtube.com/feeds/users/mostviewcomedy/uploads?alt=json-in-script&format=5&callback=showMyVideos"> 
</script> 
</div> 
+0

c'est mauvais parce que vous récupérez toujours toutes les données, vous voulez être seulement aller chercher les bonnes données, comme dans tout le filtrage à travers les paramètres de demande, pas côté client –

3

Ceci est une mise en œuvre remaniée de la réponse originale fournie par @easement en utilisant la v3 YouTube Data API actuelle.

Afin de faire une demande à l'API, vous pouvez utiliser jQuery's getJSON() call pour demander le titre de YouTube via AJAX. API de données v3 YouTube offre 3 points d'extrémité qui peuvent être utilisés pour obtenir le titre:

  1. Snippet Title - le titre de la vidéo. La valeur de la propriété a une longueur maximale de 100 caractères et peut contenir tous les caractères UTF-8 valides sauf < et>.
  2. Snippet Localized Title - Le titre vidéo localisé, toujours avec la longueur maximale décrite ci-dessus
  3. Full Localized Title - Le titre vidéo localisé complet.

Mise en oeuvre de l'échantillon à l'aide Snippet Titre

var yt_api_key = {your YouTube api key}, 
 
    yt_video_id = {your YouTube video id}, 
 
    yt_snippet_endpoint = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + yt_video_id + "&key=" + yt_api_key; 
 

 
var jqxhr = $.getJSON(yt_snippet_endpoint) 
 
    .done(function(data) { 
 
    console.log("second success callback"); 
 
    var title = getTitle(data); 
 
    // do something with title here 
 
    }) 
 
    .fail(function() { 
 
    console.log("error, see network tab for response details"); 
 
    }); 
 

 
function getTitle(snippet_json_data){ 
 
    var title = snippet_json_data.title; 
 
    return title; 
 
}

pointe Debugging: Vous pouvez utiliser des outils de développement pour voir pour vous assurer des demandes réseau (c.-à-Chrome's developer tools ou Firefox's Firebug) les demandes/réponses reviennent correctement, puis utilisez console.log() pour consigner les données renvoyées afin de vous assurer vous avez analysé la réponse correctement.

Lectures supplémentaires: YouTube Data API "getting started"

Questions connexes