"use strict";
//truncates a string to a length with html elipses
String.prototype.trunc = function(n) {
return this.substr(0, n - 1) + (this.length > n ? "…" : "");
};
// using apiKey for youtube api
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 results of youtube search
function displayResults(responseJson) {
// if there are previous results, remove them
console.log(responseJson);
$("#results-list").empty();
$("#results-list").append(
`<li><img src="${responseJson.thumbnail}" alt="thumbnail for ${
responseJson.title
}" class="thumbnail"></li>`
);
$("#results-list").append(
`<li><p>${responseJson.title.trunc(128)}"</p></li>`
);
$("#results-list").append(
`<li class=" audio-dl"><button class="w3-button w3-black w3-round audio-dl"><a href="${
responseJson.audio
}" download><i class="fa fa-download"></i> Mp3 Audio Download</a></button></li>`
);
$("#results-list").append(
`<li class="video-dl"><button class="w3-button w3-black w3-round video-dl"><a href="${
responseJson.video
}" download><i class="fa fa-download"></i> Mp4 Video Download</a></button></li>`
);
//display the results section
$("#results").removeClass("hidden");
}
//initiate youtube download
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) {
console.dir(data);
if (!data.streams) {
throw new Error(
"Error retrieving download URL, try a different video!"
);
}
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,
thumbnail: data.thumbnail,
title: data.description
};
});
}
function getYouTubeVideos(query) {
const params = {
key: apiKey,
q: query,
part: "snippet"
};
const queryString = formatQueryParams(params);
const url = searchURL + "?" + queryString;
console.log(url);
$("#js-error-message").text("");
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 => displayResults(download))
// .then(responseJson => displayResults(responseJson))
.catch(err => {
$("#js-error-message").text(`Something went wrong: ${err.message}`);
});
}
//submit button push
function watchForm() {
$("form").submit(event => {
event.preventDefault();
const searchTerm = $("#js-search-term").val();
//const maxResults = $("#js-max-results").val();
getYouTubeVideos(searchTerm);
console.log(searchTerm);
$("#results-list")
.append("<li>searching for video</li>")
.show(); //waiting search
});
}
$(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="styles\style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<div id="logo">
<img src="img\logo.png" alt="logo" />
</div>
<nav class="dark-red"></nav>
</header>
<main>
<section class="input-group">
<div class="main">
<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="Download Now" />
</form>
<section class="error-results">
<p id="js-error-message" class="error-message"></p>
</section>
<div class="cc-notice">
<b>Example:</b> https://youtu.be/7_S1bxrZZOk <br />
<b>or type a title:</b> Goalden Chyld - Focus Freestyle
</div>
</div>
</section>
<section id="results" class="hidden">
<h2>Search result</h2>
<ul id="results-list" class="w3-bar"></ul>
</section>
<section class="instruction-body">
<div class="intstruction-content">
<div class="instruction-head">
<h3>How to Download Youtube Videos</h3>
<p>
Paste the URL of Video from YouTube or type the title of a video you want into the field above.
</p>
</div>
<div class="instruction-box">
<div class="instruction-box-image">
<img src="img\Folder-Links.png" alt="twitter video downloader" width="110" height="110" />
</div>
<div class="instruction-box-header">
<div class="instruction-box-heading">Copy the Video URL</div>
<div class="instruction-box-description">
Find the YouTube video that you want to download and copy its link.
</div>
</div>
</div>
<div class="instruction-box">
<div class="instruction-box-image">
<img src="img\browser.png" alt="twitter video downloader" width="110" height="110" />
</div>
<div class="instruction-box-header">
<div class="instruction-box-heading">
Paste URL into Search Box
</div>
<div class="instruction-box-description">
Next, paste the video's link into the search field above, then click the Download button.
</div>
</div>
</div>
<div class="instruction-box">
<div class="instruction-box-image">
<img src="img\download-arrow.png" alt="twitter video downloader" width="110" height="110" />
</div>
<div class="instruction-box-header">
<div class="instruction-box-heading">
Download and Save Video
</div>
<div class="instruction-box-description">
Click the Download button to save the Youtube video to your computer.
</div>
</div>
</div>
</div>
</section>
<section></section>
</main>
<footer class="footer">
<section>
<p class="footer-right">
Copyright © 2019 U Tube Grabber. All rights reserved.
</p>
</section>
<section class="footer-left">
<p>Created by David Piper</p>
</section>
</footer>
<script src="scripts\app.js"></script>
</body>
</html>
我正在建立一个youtube mp4和mp3下载器网站，当有人提出从youtube帖子中获取数据的请求时，加载它大约需要3-5秒。我可以在JavaScript中使用这段代码的适当位置，以便它正常运行？
到目前为止，我已将此代码脚本放置在javascript中的各种功能中。除非我的代码完全错误，否则任何方法都不会起作用。
//javascript loader waiting on youtube data
$("#results-list")
.append("<li>searching for video</li>")
.show();
我希望一旦找到视频数据，则javascript加载器会显示“正在搜索视频”