检索视频从Youtube和搜索/分类

Retrieving Videos from Youtube and searching/categorizing

本文关键字：搜索 分类 Youtube 视频 检索      更新时间：2023-09-26

目前我正试图从youtube频道与youtube api拉视频，然后使用javascript来搜索和分类它。我可以得到一个搜索工作在一个html表，但不能得到它的工作表，我通过api创建。

我当前的html代码基本上是这样的:

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="container">
    <h1> RBx Youtube Videos </h1>
     <input type="text" id="search" placeholder="Type to search">
    <table id="results"> </table>
    </div>
</body>

视频在这里检索:

    $(document).ready(function(){
$.get(
    "https://www.googleapis.com/youtube/v3/channels",{
        part: "contentDetails",
        forUsername: channelName,
        key: pkey},
        function(data){
            $.each(data.items, function(i, item){
                console.log(item);
                pid = item.contentDetails.relatedPlaylists.uploads;
                getVids(pid);
            })
        }
);
function getVids(pid){
    $.get(
    "https://www.googleapis.com/youtube/v3/playlistItems",{
        part: "snippet",
        maxResults: 50,
        playlistId: pid,
        key: pkey},
        function(data){
            var output;
            $.each(data.items, function(i, item){
                console.log(item);
                videoTitle = item.snippet.title;
                videoId = item.snippet.resourceId.videoId;
                videoDescription=item.snippet.description;
                output = '<tr><td><img src="http://img.youtube.com/vi/'+videoId+'/1.jpg"></img></td><td><a href="https://www.youtube.com/watch?v='+videoId+'">'+videoTitle+'</a></td></tr><tr><td colspan="2" align="right">'+videoDescription+'<hr>';
                //output = '<tr><td>'+videoTitle+'</td></tr>';
                //Append to results listStyleType
                $('#results').append(output);
            })
        }
);
}

}

我将假设您在输出字符串中使用的变量值是有效的。请注意输出字符串中HTML语法的正确性。<img>元素不能有结束标记，因为它是一个空元素，您应该以</td></tr>:

结束字符串。
output = '<tr><td><img src="http://img.youtube.com/vi/'+videoId+'/1.jpg"></td><td><a href="https://www.youtube.com/watch?v='+videoId+'">'+videoTitle+'</a></td></tr><tr><td colspan="2" align="right">'+videoDescription+'<hr></td></tr>';
一般来说，这种生成HTML的方式是有风险的，而且容易出错。您应该始终验证、清理或转义输出中使用的所有变量。也许看看HTML5中引入的<template>元素会有所帮助，并在这种情况下使用它。您可以使用表行检查此示例。
相关文章：