Question

我正在构建一个YouTube下载器，我想在我的HTML文档的前端显示搜索结果。现在，您可以将YouTube共享链接粘贴到输入中，它将在控制台中返回音频和视频的结果，但是我拥有的displayResults函数无法正常工作，并且在前端的HTML中显示结果

我希望粘贴并按下“提交”按钮后，结果将显示在前端。

完整脚本：

"use strict";

// put your own value below!
const apiKey = "AIzaSyCGKrLxvpot6hrekFHQTPaCGeOFj92T3ao";
const searchURL = "https://www.googleapis.com/youtube/v3/search";

function formatQueryParams(params) {
  const queryItems = Object.keys(params).map(
    key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
  );
  return queryItems.join("&");
}

// DISPLAY ON BUTTON CLICK //
function displayResults(responseJson) {
  console.log(responseJson);
  $("#results-list").empty();
  $("#results-list").append(
    `<li><h3>${responseJson.items.snippet.title}</h3>
    <p>${responseJson.items.snippet.description}</p>
    <img src='${responseJson.items.snippet.thumbnails.default.url}'>
    </li>`
  );
}
// END ON DISPLAY CLICK //

function downloadVideo(videoId) {
  console.log(videoId);
  return fetch(
      `https://getvideo.p.rapidapi.com/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${videoId}`, {
        headers: {
          "X-RapidAPI-Host": "getvideo.p.rapidapi.com",
          "X-RapidAPI-Key": "d390d7b0e9msh42dc09f4e07e285p1486c4jsne0a4edb9e61e"
        }
      }
    )
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      return {
        audio: data.streams.filter(stream => {
          return stream.format === "audio only";
        })[0].url,
        video: data.streams.filter(stream => {
          return stream.format !== "audio only";
        })[0].url
      };
    });
}

function getYouTubeVideos(query, maxResults = 50) {
  const params = {
    key: apiKey,
    q: query,
    part: "snippet",
    maxResults,
    type: "video"
  };
  const queryString = formatQueryParams(params);
  const url = searchURL + "?" + queryString;

  console.log(url);

  fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error(response.statusText);
    })
    .then(responseJson => downloadVideo(responseJson.items[0].id.videoId))
    .then(download => console.log(download))
    // .then(responseJson => displayResults(responseJson))
    .catch(err => {
      $("#js-error-message").text(`Something went wrong: ${err.message}`);
    });
}

function watchForm() {
  $("form").submit(event => {
    event.preventDefault();
    const searchTerm = $("#js-search-term").val();
    const maxResults = $("#js-max-results").val();
    const results = $("#results-list").val();
    getYouTubeVideos(searchTerm, maxResults);
    displayResults(searchTerm, results);
  });
}

$(watchForm);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>YouTube video finder</title>
  <link rel="stylesheet" href="style\style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="left">
      <h1 class="finder-heading">Download a YouTube video</h1>
      <form id="js-form">
        <label for="search-term"></label>
        <input class="search-input" type="text" name="search-term" id="js-search-term" required placeholder="Paste link here https://youtu.be/sC11wWvQ7hE" />

        <label for="max-results"></label>

        <input class="go-button" type="submit" value="Search" />
      </form>
    </div>

    <p id="js-error-message" class="error-message"></p>
    <section id="results" class="hidden">
      <h2>Search results</h2>
      <ul id="results-list"></ul>
    </section>
  </div>
  <script src="apps\app.js"></script>
</body>

</html>

该下载器应该在前端上显示了您的最终选择，我已经尝试了该功能的各种方式，但是仍然没有任何显示。

function displayResults(responseJson) {
  console.log(responseJson);
  $("#results-list").empty();
  $("#results-list").append(
    `<li><h3>${responseJson.items.snippet.title}</h3>
    <p>${responseJson.items.snippet.description}</p>
    <img src='${responseJson.items.snippet.thumbnails.default.url}'>
    </li>`
  );
}

我希望粘贴并按下“提交”按钮后，结果将显示在前端

视频未插入html

0 个答案: