Get youtube video's title with jQuery using youtube api

前端未结

关注

 4  902

清歌不尽

What is the easiest way to get the title from the youtybe video , for example this video title :

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

Thanks !

相关标签:

4条回答

慢半拍i

2021-02-05 13:39

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

野性不改

2021-02-05 13:42

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>

0 讨论(0)

小蘑菇

2021-02-05 13:47

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>

0 讨论(0)

青春惊慌失措

2021-02-05 13:52
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:
1. 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 >.
2. Snippet Localized Title - The localized video title, again with the maximum length described above
3. 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"
0 讨论(0)
发布评论:

提交评论
- 加载中...