使用jQuery获取Youtube评论


Get Youtube comments with jQuery

我有一个客户端项目,该项目将使用YouTube评论流作为一种"聊天"。我正在使用Zend框架的GData api对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语句。

基本思路如下:

  1. 向用户呈现评论表单
  2. 使用jQuery钩住表单的提交事件。(文档)
  3. 通过AJAX向后端脚本提交表单。(文档)
  4. 将记录正常插入数据库
  5. 回显新注释的HTML
  6. 在请求完成后,jQuery将返回你所返回的任何HTML。剩下要做的就是把新的HTML添加到注释列表中。(文档)

我创建了一个示例供您使用。它使用了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评论"