在网页中嵌入 Youtube 评论答案

【问题标题】：Embedding Youtube comments inside a web page在网页中嵌入 Youtube 评论
【发布时间】：2013-08-22 21:25:46
【问题描述】：

我想在网页中嵌入 youtube cmets。我找到了这段代码：

<feed>
  <entry>
    ...
    <media:group>
      ...
    </media:group>
    <gd:comments>
      <gd:feedLink href='http://gdata.youtube.com/feeds/api/videos/4eYSpIz2FjU/comments'/>
    </gd:comments>
  </entry>
</feed>

我尝试将此代码包含在要测试的页面中，但它不显示 cmets。但是当我访问网址http://gdata.youtube.com/feeds/api/videos/4eYSpIz2FjU/comments cmets 显示成功。

我嵌入错了吗？我是否应该包含任何其他脚本引用来访问 Youtube cmets？

【问题讨论】：

我对 Youtube 的 API 了解不多，但找到了another topic
@SergioMarconni 感谢您的回复.......我会通过它

标签： html xhtml youtube youtube-api

【解决方案1】：

我找到了一个可行的解决方案，几年前有人发布了this 代码，我不相信它。

我在我的网站上进行了测试，效果很好。

您显然会想要添加样式并删除一些内联 html 样式。附带说明一下，您将需要添加视频 ID。如果您不知道如何执行此操作，请将 PHP 调用 (<?php echo $_GET['v']; ?>) 替换为 id，或者简单地在 PHP 中的某处定义 v。注意：如果您要手动添加 id，则需要在 2 个位置执行此操作。希望对您有所帮助。

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script type= "text/javascript">
    function getYouTubeInfo() {
            $.ajax({
                    url: "http://gdata.youtube.com/feeds/api/videos/<?php echo $_GET['v']; ?>?v=2&alt=json",
                    dataType: "jsonp",
                    success: function (data) { parseresults(data); }
            });
    }

    function parseresults(data) {
            var title = data.entry.title.$t;
            var description = data.entry.media$group.media$description.$t;
            var viewcount = data.entry.yt$statistics.viewCount;
            var author = data.entry.author[0].name.$t;
            $('#title').html(title);
            $('#description').html('<b>Description</b>: ' + description);
            $('#extrainfo').html('<b>Author</b>: ' + author + '<br/><b>Views</b>: ' + viewcount);
            getComments(data.entry.gd$comments.gd$feedLink.href + '&max-results=50&alt=json', 1);
    }

    function getComments(commentsURL, startIndex) {
            $.ajax({
                    url: commentsURL + '&start-index=' + startIndex,
                    dataType: "jsonp",
                    success: function (data) {
                    $.each(data.feed.entry, function(key, val) {
                            $('#comments').append('<br/>Author: ' + val.author[0].name.$t + ', Comment: ' + val.content.$t);
                    });
                    if ($(data.feed.entry).size() == 50) { getComments(commentsURL, startIndex + 50); }
                    }
            });
    }

    $(document).ready(function () {
            getYouTubeInfo();
    });
    </script>
    <title>YouTube</title>
</head>
<body bgcolor="grey">
    <div align="center">
            <br/><br/>
            <div id="title" style="color: #dddddd">Could not find a title</div><br/>
            <iframe title="Youtube Video Player" width="640" height="390" src="http://www.youtube.com/embed/<?php echo $_GET['v']; ?>?fs=1&autoplay=1&loop=0" frameborder="0" allowfullscreen style="border: 1px solid black"></iframe>
            <br/><br/>
            <div id="description" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find a description</div>
            <div id="extrainfo" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find extra information</div>
            <div id="comments" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find comments</div>
    </div>

【讨论】：