代码之家 › 专栏 › 技术社区 › Praveen S

如何使用javascript获取和显示youtube视频列表

http json html javascript php

Praveen S · 技术社区 · 14 年前

我写了一个C代码来获取url的youtube视频列表 “*http://gdata.youtube.com/feeds/api/standardfeeds/top-rated*”,使用libsoup库。我可以使用libxml2解析返回的xml数据,并从中提取所需的字段。

我想知道如何使用javascript实现同样的功能,并在浏览器上显示列表。我对javascript有非常基本的知识,但如果你们能给我指出正确的方向,我愿意付出所需的努力。

我从youtubeapi的google帮助文档中了解到以下内容。

以所需的格式向提及的url发送GET请求。
响应将是xml或json-c格式,必须对其进行解析

如何使用javascript实现这两种功能,并使用html/javascript显示?示例代码或任何链接都会有很大帮助。

编辑:添加php标记以提高问题的可见性,我认为php可能能够为问题提供提示。

蒂亚,

普拉文S

尝试以下建议后编辑:

如何调试? 它似乎没有显示我打算征募的视频的标题。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
    $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
         $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
        });


  });
});
</script>
</head>

<body>
<h2>Header</h2>
<p>Paragrapgh</p>
<p>Paragraph.</p>
<button>Click me</button>
</body>
</html>

3 回复 | 直到 14 年前

Alex 14 年前

好吧,我使用jQuery(一个javascript框架)创建了一些基本的东西,它向那个url发出GET请求,并以jsonp格式检索数据。然后解析关于每个条目的一些基本信息(标题和链接),并将其附加到id为的div中的无序列表中 data ,只要该条目的数据位不是未定义的。如果您将它粘贴到页面上加载了jQuery的脚本标记中并运行它,那么这是可行的。我不打算详细说明这是如何工作的,因为你说过你愿意付出一些努力。但我会给你一些链接和基本解释。

此示例利用:

概念 AJAX ,或异步Javascript和XML。用于创建交互式web应用程序的一组技术。在我们的例子中,特别是 XMLHttpRequest ,jQuery的 jQuery.ajax 是包装纸。 jQuery.getJSON 是 jQuery.ajax 专门用于检索JSON或JSONP编码的数据。
概念 JSON 或Javascript对象表示法,一种轻量级数据交换格式。您可以将其视为XML的无脂替代品。
概念 JSONP ,或带有填充的JSON。JSONP不限于与普通AJAX请求相同的源策略。
这个 jQuery javascript framework ,一个优秀的javascript框架,用于dom操作和ajax请求,以及几乎所有其他有用的东西。
这个 jQuery.getJSON() 方法,该方法用于检索json或jsonp数据,如本例中所示
这个 jQuery.each() 方法,该方法可用于迭代任何泛型集合(在本例中为json)。
这个 .append() 方法,该方法用于将内容附加到dom元素。
概念 jQuery Selectors ,它们实际上只是css选择器,还有一些额外的铃声和口哨声。jQuery使用选择器快速“选择”dom元素以对其进行操作。

无需再会:

例子

     $("body").append("<div id = 'data'><ul></ul></div>");
     $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=?&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
            if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
                dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
    });

这应该足以让你“指向正确的方向”,如果你有任何问题,发表评论,我会尽力回答。

Dr.Molle 14 年前

是的,你可以^^

youtube API还提供了jsonp,它以JS命令的形式返回数据。
请注意(并查看URL中的参数):
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=json&callback=someFunction

使用jsonp,您没有任何sameOriginPolicies限制,但它不适用于AJAX。

使用像jQuery这样的库很容易。

如果不想使用jQuery或类似的东西,则必须注入 <script> -元素,并创建一个处理数据的函数(使用上面的URL必须命名为“someFunction”)。

Kranu 14 年前

YouTube API支持JSONP(JavaScript对象表示法w/Padding)。JSONP允许您发出外部站点请求以获取数据。但你不需要知道这些。基本思想是将请求作为src属性注入脚本标记。

但是现在,你也不需要这么做,除非你想学习核心的Javascript。这些代码都是在优秀的Javascript库中为您编写的。我建议您使用jQuery发出JSONP请求。jQuery是一个简单的库,可以通过向HTML文档添加一行代码来使用。

一旦启动并运行jQuery,就可以使用getJSON命令解析JSONP数据。在这一点上,您将得到一个包含所有所需数据的对象,您可以选择如何输出数据。