``几乎我知道我必须用 java 来做，但我真的对 java 一无所知，我唯一知道的是如何通过 AJAX 使页面在更改页面时不冻结
我非常想通过为 youtube 实现 yt-dlb 分支来挑战自己，它工作得很好，但我被困在添加一个计时器，告诉用户在转换后的文件准备好下载之前需要多长时间（我的意思是严格来说，这是从用户按下转换到出现下载所述文件的按钮的时间。）
我不打算在任何地方部署它，我只是想学习如何做
我试过查看一些论坛但没有用
我唯一试过的就是这个
<h1>Yeqwfwq</h1>
<div id="message"></div>
<form id="download-form">
<label for="youtube_url">YouTube video URL:</label>
<input type="text" name="youtube_url" id="youtube_url">
<br><br>
<label for="format">Select a format:</label>
<select name="format" id="format">
<option value="mp3">MP3</option>
<option value="mp4">MP4</option>
</select>
<br><br>
<button type="submit">Convert</button>
</form>
<div id="progress-bar" style="display:none">
<div id="progress" style="background-color: #4CAF50; width: 0%; height: 20px;"></div>
<div id="progress-text">Conversion progress: <span id="progress-percent">0%</span></div>
<br>
</div>
<script>
$(document).ready(function() {
// Handle form submission
$("#download-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var message = $("#message");
var url = form.find("#youtube_url").val();
var format = form.find("#format").val();
// Check if the YouTube URL is valid
if (url.trim() === "" || !isValidYoutubeUrl(url)) {
message.html("Please enter a valid YouTube video URL");
return;
}
// Send AJAX request to start download
$.ajax({
type: "POST",
url: "download.php",
data: {
youtube_url: url,
format: format
},
beforeSend: function() {
message.html("Starting download...");
$("#progress-bar").show();
},
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total || event.totalSize;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
$("#progress").width(percent + '%');
$("#progress-percent").html(percent + '%');
}, true);
}
return xhr;
},
success: function(data) {
message.html(data);
$("#progress-bar").hide();
},
error: function() {
message.html("An error occurred while downloading the video");
$("#progress-bar").hide();
}
});
});
// Validate YouTube URL
function isValidYoutubeUrl(url) {
var pattern = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\//;
return pattern.test(url);
}
});
</script>
但是每次我尝试下载一些东西时，下载完成后就会显示计时器。
这将是完成所有工作的 php 代码
<?php
// Check if YouTube video URL and format are set
if (isset($_POST['youtube_url']) && isset($_POST['format'])) {
// Get YouTube video URL and format
$youtube_url = $_POST['youtube_url'];
$format = $_POST['format'];
// Validate YouTube URL
if (preg_match('/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\//', $youtube_url) !== 1) {
die("Please enter a valid YouTube video URL");
}
// Build yt-dlp command
$cmd = "yt-dlp --yes-playlist -o downloads/%(title)s.%(ext)s " . escapeshellarg($youtube_url);
// If format is mp3, add the --extract-audio and --audio-format mp3 options
if ($format === "mp3") {
$cmd .= " --extract-audio --audio-format mp3";
}
// If format is mp4, add the --merge-output-format mp4 option
if ($format === "mp4") {
$cmd .= " --merge-output-format mp4";
}
// Execute yt-dlp command
exec($cmd, $output, $return);
// Check if the download was successful
if ($return === 0) {
// Find the downloaded file
$files = glob('downloads/*.' . $format);
if (count($files) > 0) {
$filename = $files[0];
// Set headers to download the file
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="' . basename($filename) . '"');
header('Content-Length: ' . filesize($filename));
} else {
echo "An error occurred: downloaded file not found";
}
} else {
echo "An error occurred while downloading the video";
}
// Add download button
echo '<a href="downloads/' . basename($filename) . '" download>
<button>Download Converted File</button>
</a>';
} else {
echo "Please enter a YouTube video URL and select a format";
}
?>
and this would be the code that handles the HTML page
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<html>
<head>
<title>YouTube Downloader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>YouTube Downloader</h1>
<div id="message"></div>
<form id="download-form">
<label for="youtube_url">YouTube video URL:</label>
<input type="text" name="youtube_url" id="youtube_url">
<br><br>
<label for="format">Select a format:</label>
<select name="format" id="format">
<option value="mp3">MP3</option>
<option value="mp4">MP4</option>
</select>
<br><br>
<button type="submit">Convert</button>
</form>
<script>
$(document).ready(function() {
// Handle form submission
$("#download-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var message = $("#message");
var url = form.find("#youtube_url").val();
var format = form.find("#format").val();
// Check if the YouTube URL is valid
if (url.trim() === "" || !isValidYoutubeUrl(url)) {
message.html("Please enter a valid YouTube video URL");
return;
}
// Send AJAX request to start download
$.ajax({
type: "POST",
url: "download.php",
data: {
youtube_url: url,
format: format
},
beforeSend: function() {
message.html("Starting download...");
},
success: function(data) {
message.html(data);
},
error: function() {
message.html("An error occurred while downloading the video");
}
});
});
// Validate YouTube URL
function isValidYoutubeUrl(url) {
var pattern = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\//;
return pattern.test(url);
}
});
</script>
</body>
</html>
`
`