[增订] 我有两个HTML页面,即index.html和player.html。在index.html上,我加载了多个播放列表,以便当用户点击任何视频时,它会在新标签页中打开player.html并在YouTube播放器中加载视频。
问题是在player.html上,我已成功获得div中的视频标题,但我不确定如何添加发布日期和类别名称。
我在控制台中收到以下错误:
未捕获的TypeError:无法读取属性'长度'未定义的
在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>
player.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 = '';
});
}
答案 0 :(得分:1)
您可以使用snippet.publishedAt
来显示视频发布的日期和时间。另请查看snippet.categoryId
以获取与视频相关联的YouTube video category。如果您调用 videos.update 方法并且正在更新视频资源的snippet部分,则必须为此媒体资源设置一个值。
答案 1 :(得分:0)
This is what the JSON response is like (Click the link to see).
就像获得“videoID”和“title”的方式一样,您可以通过
获取发布日期var publishedAt = item['snippet']['publishedAt'];