使用youtube api通过jQuery获取youtube视频的标题

时间:2010-03-19 15:14:58

标签: jquery api youtube

从youtube视频中获取标题的最简单方法是什么,例如此视频标题:

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

谢谢!

4 个答案:

答案 0 :(得分:15)

使用jQuery's JSON调用YouTube API获取结果,然后使用jQuery将结果放在您想要的位置。您可以使用firebug的NET选项卡确保请求/ respoonses正确返回,然后使用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

答案 1 :(得分:7)

这是@easement使用当前v3 YouTube Data API提供的原始答案的彻底修改。

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

  1. Snippet Title - 视频的标题。属性值的最大长度为100个字符,并且可以包含除<之外的所有有效UTF-8字符。和>。
  2. Snippet Localized Title - 本地化视频标题,同样具有上述最大长度
  3. Full Localized Title - 全长本地化视频标题。
  4. 使用代码段标题实施示例

    
    
    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 toolsFirefox's Firebug),以确保您的请求/响应正确回传然后使用console.log()记录返回的数据,以确保正确解析响应。

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

答案 2 :(得分:4)

试试这个:

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

答案 3 :(得分:-2)

尝试在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>