显示 YouTube 视频的发布日期

Question

[更新] 我有两个 HTML 页面，即 index.html 和 player.html。在 index.html 上，我加载了多个播放列表，因此当用户点击任何视频时，它会在新选项卡中打开 player.html 并将视频加载到 YouTube 播放器中。

问题是，在 player.html 上，我已成功在 div 中获取视频标题，但我不确定如何添加发布日期和类别名称。

我在控制台中收到以下错误：

未捕获的类型错误：无法读取未定义的属性“长度”

在 Function.each (jquery.min.js:2)

在 window.onload (player.html?vid=Un5SEJ8MyPc:50)

每个@jquery.min.js:2

window.onload@player.html?vid=Un5SEJ8MyPc:50

加载（异步）

（匿名）@player.html?vid=Un5SEJ8MyPc:28

这是我的 HTML：

index.html

<section id="programs">
<div class="row">
    <div class="col-sm-8">
        <h3>Banking</h3>
            <div id="youtube-playlist-feed_1"></div>
    </div>
    <div class="col-sm-4">
        <div class="row">
            <h3>Sponsors</h3>
        </div>
    </div>
</div>
</section>
<section id="programs">
<div class="row">
    <div class="col-sm-8">
        <h3>Business</h3>
            <div id="youtube-playlist-feed_2"></div>
    </div>
    <div class="col-sm-4">
        <div class="row">

        </div>
    </div>
</div>
</section>

播放器.html

<div id="vtitle"></div>
<div id="display"></div>
<div id="published"></div>
<div id="category"></div>
<script type="text/javascript">
                window.onload = function () {
                var url = document.location.href,
                    params = url.split('?')[1].split('&'),
                    data = {}, tmp;
                for (var i = 0, l = params.length; i < l; i++) {
                     tmp = params[i].split('=');
                     data[tmp[0]] = tmp[1];
                }   
                 var videoId = data.vid;
                 var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
                 document.getElementById('display').innerHTML = output;

                 var id = videoId;
                 var url = 'https://www.youtube.com/watch?v=' + id;

                 $.getJSON('https://noembed.com/embed',
                 {format: 'json', url: url}, function (data) {
                 document.getElementById('vtitle').innerHTML=(data.title);


            });

                $.each(data.items, function(i, item) {
                      console.log(item)
                  var videoID = item['snippet']['resourceId']['videoId'];
                  var title = item['snippet']['title'];
                  var url = 'https://www.youtube.com/watch?v=' + videoID;
                  var output = 'Hi';

                  document.getElementById('published').innerHTML = output;
                  });
            }

            </script>

script.js

            var htmlString = "";
            var apiKey = 'AIzaSyA7dAzzNvPCxTSsSGiV7dvoj3rkt0qbdXg';
            var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
            var maxResults = 7;

            var playlists = [{
                playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
                el: '#youtube-playlist-feed_1'
              },
              {
                playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
                el: '#youtube-playlist-feed_2'
              },
              {
                playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
                el: '#youtube-playlist-feed_3'
              }
            ];

            playlists.forEach(function(playlist) {
              getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
            })

            function getVideoFeedByPlaylistId(playlistId, el) {
              $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 3 ? 3 : maxResults), function(data) {
                $.each(data.items, function(i, item) {
                  var videoID = item['snippet']['resourceId']['videoId'];
                  var title = item['snippet']['title'];
                  var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
                  htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="player.html?vid='+videoID+'" ><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" id="player" href="player.html?vid='+videoID+'">' + title + '</a></div></div>';


                });
                $(el).html(htmlString);

                htmlString = '';
              });
            }

Answer 1

您可以使用snippet.publishedAt 显示视频发布的日期和时间。还要检查 snippet.categoryId 以获取与视频关联的 YouTube video category。如果您调用 videos.update 方法并更新视频资源的 snippet 部分，则必须为此属性设置一个值。

Answer 2

This is what the JSON response is like (Click the link to see).

就像你得到“videoID”和“title”的方式一样，你可以得到发布日期

var publishedAt = item['snippet']['publishedAt'];