Question

// 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("&");
}

function displayResults(responseJson) {
  // if there are previous results, remove them
  console.log(responseJson);
  $("#results-list").empty();
  // iterate through the items array
  for (let i = 0; i < responseJson.items.length; i++) {
    // for each video object in the items
    //array, add a list item to the results
    //list with the video title, description,
    //and thumbnail
    $("#results-list").append(
      `<li><h3>${responseJson.items[i].snippet.title}</h3>
      <p>${responseJson.items[i].snippet.description}</p>
      <img src='${responseJson.items[i].snippet.thumbnails.default.url}'>
      </li>`
    );
  }
  //display the results section
  $("#results").removeClass("hidden");
}

async function downloadVideo(videoId) {
  console.log(videoId);
  const response = await 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"
    }
  });
  const data = await response.json();
  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();
    getYouTubeVideos(searchTerm, maxResults);
  });
}

$(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="Search YouTube Videos..."
          />

          <label for="max-results"></label>
          <input
            class="max-number"
            type="number"
            name="max-results"
            id="js-max-results"
            value="10"
          />

          <input class="go-button" type="submit" value="Search" />
        </form>
      </div>

      <!-- <div class="right">
        <h1 class="downloader-heading">Download a YouTube video</h1>
        <input class="URL-input" placeholder="Paste YouTube link here..." />
        <button class="download-button">
          <i class="fa fa-download"></i> Download
        </button>
      </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>

我正在制作一个使用YouTube API和GET Video and Audio URL API的2 API mashup的网络应用。我遇到的问题是我不知道该项目的下载部分中所需的javascript代码如何编写...

目前，我已将javascript编码到一个点，如果您运行它并在google chrome中检查，您将在控制台中看到它如何捕获您选择插入到其中的任何视频链接的音频文件和视频文件输入。

我希望以此捕获视频，并在HTML中生成缩略图，并提供下载MP4或MP3的给定选项

Answer 1

问题是您的.then()的顺序。您每次调用都将返回数据，并且在一次调用中将返回console.log()，它将是未定义的。您可以这样修复它：

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(r => r.json())
          .then(data => {
            displayResults(data);
            return downloadVideo(data.items[0].id.videoId);
          })
          .then(download => console.log(download))
          .catch(err => {
            $("#js-error-message").text(`Something went wrong: ${err.message}`);
          });
}

如何在我的YouTube MP4和MP3下载器中编写JavaScript下载功能

1 个答案: