Get youtube video's title with jQuery using youtube api
What is the easiest way to get the title from 开发者_C百科the youtybe video , for example this video title :
http://www.youtube.com/watch?v=Wp7B81Kx66o
Thanks !
Use jQuery's JSON call to the YouTube API to get the results back and then use jQuery to put the results where you want them. You can use firebug's NET tab to make sure you requests/respoonses are coming back correctly and then use console.log() to make sure you parsed the response correctly.
eg. URL:
GET https://gdata.youtube.com/feeds/api/videos/(the-video-id)?v=2&alt=json
More info:
YouTube API for a specific video
Developer's Guide: JSON / JavaScript
This is a overhauled implementation of the original answer provided by @easement using the current v3 YouTube Data API.
In order to make a request to the API, you can use jQuery's getJSON() call to request the title from YouTube via AJAX. YouTube's v3 Data API provides 3 endpoints that can be used to get the title:
- Snippet Title - The video's title. The property value has a maximum length of 100 characters and may contain all valid UTF-8 characters except < and >.
- Snippet Localized Title - The localized video title, again with the maximum length described above
- Full Localized Title - The full length localized video title.
Sample Implementation using Snippet Title
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;
}Debugging tip: You can use developer tools to view Network requests (i.e Chrome's developer tools or Firefox's Firebug) to make sure you requests/responses are coming back correctly and then use console.log() to log the returned data to make sure you parsed the response correctly.
Additional Reading: YouTube Data API "getting started"
Try this:
<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>
and this in your body part:
<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>
Try this for show Youtube feature picture in front of Jquery list view.
<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>
加载中,请稍侯......
精彩评论