Question

目前我正在尝试使用youtube api从youtube频道中提取视频，然后使用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);
            })
        }
);

}

}

Answer 1

我将假设您在输出字符串中使用的变量值有效。请注意输出字符串中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>元素并在这种情况下使用它可能会有所帮助。您可以使用表格行检查this example。

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

1 个答案: