"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("&");
}
//Show results of search
function displayResults() {
$("#results").removeClass("hidden");
}
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();
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="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>
我正在构建一个youtube下载器,我想在我的HTML文档的前端显示搜索结果。现在,您可以将youtube共享链接粘贴到输入中,它将在控制台中返回音频和视频的结果,但是我拥有的displayResults函数无法正常工作,并且在前端的HTML中显示结果。
该下载器应该在前端上显示了您的最终选择,我已经尝试了该功能的各种方式,但是仍然没有任何显示。
$("#results").removeClass("hidden");
}
我希望粘贴并按下“提交”按钮后,结果将显示在前端