使用 jQuery 获取 Youtube 评论

Question

我有一个客户项目，它将使用 YouTube 评论流作为一种“聊天”。我正在使用带有 Zend 框架的 GData API 对 YouTube 进行经过身份验证的调用。我正在寻找一种运行脚本的方法，该脚本将使用刷新按钮提取评论流，以便用户不必刷新页面即可查看他们的评论或出现的任何新 cmets。我相信这可以用 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。 (docs)

Answer 2

我创建了一个示例供您使用。它使用了 Youtube JSON API，这里有些详细说明：http://code.google.com/apis/youtube/2.0/reference.html#Comments_Feeds

在 XML 中，我使用的是 JSON。

要使用 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 cmets”