使用 youtube api 使用 jQuery 获取 youtube 视频的标题答案

【问题标题】：Get youtube video's title with jQuery using youtube api使用 youtube api 使用 jQuery 获取 youtube 视频的标题
【发布时间】：2011-01-29 12:30:02
【问题描述】：

从youtybe视频中获取标题的最简单方法是什么，例如这个视频标题：

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

谢谢！

【问题讨论】：

看看这个：How to get thumbnail of YouTube video link using YouTube API。它表示缩略图，但几乎可以获取有关视频的任何公开可用信息。

标签： jquery api youtube

【解决方案1】：

试试这个：

<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>

这在你的身体部位：

<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】：

使用jQuery's JSON 调用 YouTube API 来获取结果，然后使用 jQuery 将结果放在您想要的位置。您可以使用 firebug 的 NET 选项卡来确保您的请求/响应正确返回，然后使用 console.log() 来确保您正确解析了响应。

例如。网址：

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

更多信息：

YouTube API for a specific video

Developer's Guide: JSON / JavaScript

【讨论】：

这是已弃用的 YouTube v2 API，@AlexC 如果您认为正确，请更新到下面的答案

【解决方案3】：

尝试在 Jquery 列表视图前显示 Youtube 专题图片。

<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>

【讨论】：

这很糟糕，因为您仍在获取所有数据，您只想获取正确的数据，就像通过请求参数而不是客户端进行所有过滤一样

【解决方案4】：

这是@easement 使用当前v3 YouTube Data API 提供的原始答案的大修实现。

要向 API 发出请求，您可以使用 jQuery's getJSON() call 通过 AJAX 从 YouTube 请求标题。 YouTube 的 v3 Data API 提供了 3 个可用于获取标题的端点：

Snippet Title - 视频的标题。属性值的最大长度为 100 个字符，并且可以包含除之外的所有有效 UTF-8 字符。
Snippet Localized Title - 本地化的视频标题，同样具有上述最大长度
Full Localized 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;
}

调试提示：您可以使用开发者工具查看网络请求（即Chrome's developer tools 或Firefox's Firebug）以确保您的请求/响应正确返回，然后使用console.log( ) 来记录返回的数据，以确保您正确解析了响应。

补充阅读： YouTube Data API "getting started"

【讨论】：