相关视频与部分contentDetails和统计 - Youtube API V3 [英] Related Videos with part contentDetails and Statistics - Youtube API V3
问题描述
我在以特定视频的缩略图方式检索相关视频时遇到问题。在我的代码中，我已正确设置 search->列表，并返回相关视频的不同标题和缩略图网址。但是，由于 search-> list 没有参数 contentDetails 或 statistics code>，我发现另一个问题与我完全相同的问题有关这里，并使用辅助呼叫获取 videos-> list ，因为它支持这些参数以检索持续时间和查看计数。但问题是这两个值（ vidDuration & viewCount ）都没有被传递任何东西，并标记为未定义项目通过它并停止。我如何根据 search->列表 viewCount / code>的项目？
script.js：
函数relatedVids（videoId）
{
调试器;
$ .get（//获取与videoId相关的视频 - relatedToVideoId
https://www.googleapis.com/youtube/v3/search，
{
部分：'snippet'，
maxResults：vidResults，
relatedToVideoId：videoId，// $ .cookie（id）; from single-video.html
类型：'video'，
key：'XXXXXXXXX'
}，
函数（数据）
{
$ .each（data.items，
函数（i， item）
{
console.log（item）;
var vidTitle = item.snippet.title; // video title
// var videoId = item.snippet.resourceId。 videoId; // video id
// var vidDuration = item.contentDetails.duration;
// var viewCount = item.statistics.viewCount;
var vidThumbUrl = item.snippet.thumbnails.default .url; //视频缩略图il url
var extractVideoId = null; // var从vidThumbUrl中提取视频ID字符串
//检查vidThumbUrl是否为空，空字符串或未定义$ b $ if（vidThumbUrl）
{
/ /console.log(\"vidThumbUrl：，vidThumbUrl）;
var split = vidThumbUrl.split（/）; //当看到'/'时拆分字符串
extractVideoId = split [4]; //检索第四个'/'
的第四个索引//console.log(\"extractVideoId：，extractVideoId）; // YE7VzlLtp-4
//console.log（split array：，split）;
}
else console.error（vidThumbUrl要么是未定义的，要么是空字符串。）;
//如果视频标题长于25个字符，则插入三点椭圆
if（vidTitle.length> 25）
{
var strNewVidTitle = vidTitle.substr（ 0，25）+...;
vidTitle = strNewVidTitle;
}
// search->列表只需要片段，因此获得持续时间和查看次数;必须调用具有公认的参数结构
$ .get（
https://www.googleapis.com/youtube/v3/videos，
{
部分：'contentDetails，statistics'，
id：extractVideoId，//item.snippet.resourceId.videoId，
key：'XXXXXXXXX'，
}，
//返回搜索 - >列表项的持续时间和查看次数
函数（item）
{
vidDuration = item.contentDetails.duration; //传递项目的持续时间
return vidDuration;
}，
函数（item）
{
viewCount = item.statistics.viewCount; //传递项目的视图数量
返回viewCount;
}
）;
尝试
{
var vidThumbnail ='< div class =video-thumbnail>< a class =thumb-linkhref = single-video.html>< div class =video-overlay>< img src =imgs / video-play-button.png/>< / div>< img src = '+ vidThumbUrl +'alt =没有图片可用。 style =width：204px; height：128px/>< / a>< p>< a class =thumb-linkhref =single-video.html>'+ vidTitle +'< ; / a>< br />'+ convert_time（vidDuration）+'/ Views：'+ viewCount +'< / p>< / div>';
//打印结果
$（'。thumb-related'）。append（vidThumbnail）;
}
catch（err）
{
console.error（err.message）; //记录错误但继续操作
}
}
）;
}
）;
}
single-video.html脚本：
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $（$）$函数（）
{
if（$。cookie（title）！= null&& $ .cookie（id）！= null）
{
var data ='< div class =video>< iframe height ='+ vidHeight +'width ='+ vidWidth +'src = \// www.youtube.com/embed/ '+ $ .cookie（id）+'\>< / iframe>< / div>< div class =title>'+ $ .cookie（title）+'< ; / div>< div class =desc>'+ $ .cookie（desc）+'< / div>< div class = dur）+'< / div>< div class =stats>查看次数：'+ $ .cookie（views）+'< / div>';
$（＃video-display）。html（data）;
$（＃tab1）。html（$。cookie（desc））;
$ b $ videoId = $ .cookie（id）;
// vidDuration = $ .cookie（dur）;可以为每个
// viewCount = $ .cookie（views）打印出相同的值。工作，但打印出每个
调试器相同的值;
relatedVids（videoId）; //在此处称为
console.log（from single-vid.html globalPlaylistId：，$ .cookie（playlistId））;
//将cookies传输到此页面以便显示后删除cookies
$ .removeCookie（title）;
$ .removeCookie（id）;
$ .removeCookie（desc）;
$ .removeCookie（views）;
$ .removeCookie（dur）;
$ .removeCookie（tags）;
$ .removeCookie（playlistId）;
}
}）;
}）;
您指的是 item 在搜索结果中。
当您向视频发出获取请求时，您会收到视频内容详细信息和统计信息的回复。显然，你没有捕获返回的回复。
$ .get（
https://www.googleapis.com/youtube/v3/videos，
{
部分：'contentDetails，statistics'，
id：videoId，//item.snippet.resourceId.videoId，
key：'XXXXXXXXX'，
} ，
函数（videoItem）
{
vidDuration = videoItem.contentDetails.duration; //传递项目的持续时间
viewCount = videoItem.statistics.viewCount; // pass商品的查看次数
}
）;
注意：您可以传递由逗号分隔的一串视频ID以获取多个视频contentDetails / statistics在一个请求。
I'm having a problem with retrieving related videos as thumbnails towards a specific video. In my code, I have the search->list set up correctly and returns the different titles and thumbnail URLs for the related videos. However, since search->list doesn't have parameter contentDetails or statistics, I found another question related to my exact same problem here and used a secondary call for getting videos->list since it supports those parameters to be able to retrieve the duration and view count. But the problem is that both values (vidDuration & viewCount) are not being passed anything and marked as undefined as the item is passed through it and halted. How can I make the item's duration and viewCount values based on search->list's item?
script.js:
function relatedVids(videoId)
{
debugger;
$.get( // get related videos related to videoId - relatedToVideoId
"https://www.googleapis.com/youtube/v3/search",
{
part: 'snippet',
maxResults: vidResults,
relatedToVideoId: videoId, // $.cookie("id"); from single-video.html
type: 'video',
key: 'XXXXXXXXX'
},
function(data)
{
$.each(data.items,
function(i, item)
{
console.log(item);
var vidTitle = item.snippet.title; // video title
//var videoId = item.snippet.resourceId.videoId; // video id
//var vidDuration = item.contentDetails.duration;
//var viewCount = item.statistics.viewCount;
var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
var extractVideoId = null; // var to extract video id string from vidThumbUrl
// check if vidThumbUrl is not null, empty string, or undefined
if(vidThumbUrl)
{
//console.log("vidThumbUrl: ", vidThumbUrl);
var split = vidThumbUrl.split("/"); // split string when '/' seen
extractVideoId = split[4]; // retrieve the fourth index on the fourth '/'
//console.log("extractVideoId: ", extractVideoId); // YE7VzlLtp-4
//console.log("split array: ", split);
}
else console.error("vidThumbUrl is either undefined or null or empty string.");
// if video title is longer than 25 characters, insert the three-dotted ellipse
if(vidTitle.length > 25)
{
var strNewVidTitle = vidTitle.substr(0, 25) + "...";
vidTitle = strNewVidTitle;
}
// search->list only takes snippet, so to get duration and view count; have to call this function that has the recognized param structure
$.get(
"https://www.googleapis.com/youtube/v3/videos",
{
part: 'contentDetails, statistics',
id: extractVideoId, //item.snippet.resourceId.videoId,
key: 'XXXXXXXXX',
},
// return search->list item's duration and view count
function(item)
{
vidDuration = item.contentDetails.duration; // pass item's duration
return vidDuration;
},
function(item)
{
viewCount = item.statistics.viewCount; // pass item's view count
return viewCount;
}
);
try
{
var vidThumbnail = '<div class="video-thumbnail"><a class="thumb-link" href="single-video.html"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a class="thumb-link" href="single-video.html">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';
// print results
$('.thumb-related').append(vidThumbnail);
}
catch(err)
{
console.error(err.message); // log error but continue operation
}
}
);
}
);
}
single-video.html script:
$(document).ready(function()
{
var videoId;
$(function()
{
if($.cookie("title") != null && $.cookie("id") != null)
{
var data = '<div class="video"><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + $.cookie("id") + '\"></iframe></div><div class="title">' + $.cookie("title") + '</div><div class="desc">' + $.cookie("desc") + '</div><div class="duration">Length: ' + $.cookie("dur") + '</div><div class="stats">View Count: ' + $.cookie("views") + '</div>';
$("#video-display").html(data);
$("#tab1").html($.cookie("desc"));
videoId = $.cookie("id");
//vidDuration = $.cookie("dur"); works but prints out the same value for each
//viewCount = $.cookie("views"); works but prints out the same value for each
debugger;
relatedVids(videoId); // called here
console.log("from single-vid.html globalPlaylistId: ", $.cookie("playlistId"));
// remove cookies after transferring it to this page for display
$.removeCookie("title");
$.removeCookie("id");
$.removeCookie("desc");
$.removeCookie("views");
$.removeCookie("dur");
$.removeCookie("tags");
$.removeCookie("playlistId");
}
});
});
You're referring the item in the search results.
When you issued a get request to videos, you will get a response of video contentDetails and statistics. Apparently, you didn't capture the returned response.
$.get(
"https://www.googleapis.com/youtube/v3/videos",
{
part: 'contentDetails, statistics',
id: videoId, //item.snippet.resourceId.videoId,
key: 'XXXXXXXXX',
},
function(videoItem)
{
vidDuration = videoItem.contentDetails.duration; // pass item's duration
viewCount = videoItem.statistics.viewCount; // pass item's view count
}
);
NOTE: You can pass a string of video IDs delimited by a comma to fetch multiple video contentDetails/statistics in one request.
这篇关于相关视频与部分contentDetails和统计 - Youtube API V3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
