使用 jQuery 获取 Youtube 评论

Question

我有一个客户项目，该项目将使用 YouTube 评论流作为一种“聊天”。我正在使用 GData API 和 Zend Framework 对 YouTube 进行经过身份验证的调用。我正在寻找一种运行脚本的方法，该脚本将使用刷新按钮拉取评论流，以便用户不必刷新页面即可查看他们的评论或出现的任何新评论。我相信这可以通过 JQuery 来完成，但经过一番搜索后，我还没有真正找到关于如何实现的很好的解释。以下是我的代码的一些简短片段，可让您了解我正在查看的内容：

$yt = new Zend_Gdata_YouTube($httpClient, $applicationId, $clientId, $developerKey);
$_SESSION['yt'] = serialize($yt);

/***************** Adds a comment if applicable *****************/

if(isset($_POST['btn_submit']))
{
$videoEntry = $yt->getVideoEntry('QQoFLrZ5C3M');

$newComment = $yt->newCommentEntry();
$newComment->content = $yt->newContent()->setText($_POST['comment']);

// post the comment to the comments feed URL for the video
$commentFeedPostUrl = $videoEntry->getVideoCommentFeedUrl();
$updatedVideoEntry = $yt->insertEntry($newComment, $commentFeedPostUrl,
'Zend_Gdata_YouTube_CommentEntry');
}

                        /****************************************************************/


<div id="coments">

$commentFeed = $yt->getVideoCommentFeed('QQoFLrZ5C3M');

echo '<div id="refresh"><a href="#" style="margin-right: 15px; border: 0;"><img src="../common/img/refresh.png" alt="refresh" border="0" /></a></div>';

foreach ($commentFeed as $commentEntry) {
echo '<div class="comment">';
echo  '<a href="http://youtube.com/user/' . utf8_decode(utf8_encode($commentEntry->author[0]->name->text)) . '" target="_blank" class="youtube_user">' . utf8_decode(utf8_encode($commentEntry->author[0]->name->text)) . '</a><br />';

echo  '<span style="font-size: 14px;">' . utf8_decode(utf8_encode($commentEntry->content->text)) . '</span><br />';

// Format time
$timeAgoObject = new convertToAgo;
$ts = strtotime($commentEntry->updated->text);
$timestamp = ($timeAgoObject -> makeAgo($ts)); // Then convert to ago time

echo  '<div class="yt_timestamp">' . $timestamp  . '</div>';
echo '</div>';
}
?>
</div>

请注意，youtube 类并不总是新的（因此序列化为会话变量）我只是删除了 if 语句以便于阅读。

Answer 1

基本思想如下：

1. 向用户呈现评论表单
2. 使用 jQuery 挂钩表单的提交事件。 (docs)
3. 通过 AJAX 将表单提交到后端脚本。 (docs)
4. 照常将记录插入数据库。
5. 回显新评论的 HTML。
6. 请求完成后，jQuery 将返回您回显的任何 HTML。剩下的就是将新的 HTML 添加到您的评论列表中。 （文档）

Answer 2

我创建了一个示例供您使用。它利用了 Youtube JSON API，详细信息如下：http://code.google .com/apis/youtube/2.0/reference.html#Comments_Feeds

我使用的是 JSON，而不是 XML。

要使用 JSON 获取视频的“数据”，请使用 http://gdata.youtube.com/feeds/api/videos/YOURVIDEOID/comments

示例：
http://jsfiddle.net/A32H2/2/

//"The Dark Knight Rises trailer, sweded" comments
//http://www.youtube.com/watch?v=KrmEyPkgDf8

    <div id="comments"></div>

    $.ajax({
        url: "http://gdata.youtube.com/feeds/api/videos/KrmEyPkgDf8/comments?v=2&alt=json&max-results=50",  
        //gets the max first 50 results.  To get the 'next' 50, use &start-index=50
        dataType: "jsonp",
        success: function(data){
            $.each(data.feed.entry, function(key, val) {

                comment = $("<div class='comment'></div>");

                author = $("<a target='_blank' class='youtube_user'></a>");
                author.attr("href", "http://youtube.com/user/" + val.author[0].name.$t);
                author.html(val.author[0].name.$t);

                content = $("<div style='font-size: 14px;' class='content'></div>");
                content.html(val.content.$t);

                comment.append(author).append(content);
                $('#comments').append(comment);
            });
        }
    });

另外我建议更改您的问题的标题更具描述性的内容，例如“使用 jQuery 获取 Youtube 评论”