我正在一个视频共享平台上工作。我想做的是,当用户上传视频时,它首先显示一个上传进度条,并在完成上传后显示另一个进度条,以显示ffmpeg的执行时间。
我正在使用此jQuery代码显示上传进度条。
$("body").on("submit", "form[name='upload']", function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
cache: false,
contentType: false,
data: formData,
dataType: "json",
method: "POST",
processData: false,
url: "upload.php",
error: function() {
alert("Sorry, something went wrong!");
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
$(".upload .progress-bar").css({
"width": percentComplete + "%"
});
}
}, false);
return xhr;
}
});
});
我正在使用此php代码在ffmpeg中执行视频。
shell_exec('ffmpeg -i uploads/video.mp4 -c:a copy -s 256x144 uploads/video_144p.mp4 > uploads/output.log 2>&1');
它将生成一个“ output.log”文件。 现在,在jQuery中,我可以获取此日志文件的内容并在进行少量计算后显示进度。 这是jQuery代码
$.ajax({
type: "GET",
cache: false,
url: "uploads/output.log",
success: function(response) {
var duration = 0;
var time = 0;
var progress = 0;
var matches = (response) ? response.match(/Duration: (.*?), start:/) : [];
if (matches.length > 0) {
var rawDuration = matches[1];
var arrayReverse = rawDuration.split(":").reverse();
duration = parseFloat(arrayReverse[0]);
if (arrayReverse[1]) duration += parseInt(arrayReverse[1]) * 60;
if (arrayReverse[2]) duration += parseInt(arrayReverse[2]) * 60 * 60;
matches = response.match(/time=(.*?) bitrate/g);
console.log(matches);
if (matches.length > 0) {
var rawTime = matches.pop();
if (Array.isArray(rawTime)) {
rawTime = rawTime.pop().replace("time=", "").replace(" bitrate", "");
} else {
rawTime = rawTime.replace("time=", "").replace(" bitrate", "");
}
arrayReverse = rawTime.split(":").reverse();
time = parseFloat(arrayReverse[0]);
if (arrayReverse[1]) time += parseInt(arrayReverse[1]) * 60;
if (arrayReverse[2]) time += parseInt(arrayReverse[2]) * 60 * 60;
progress = Math.round((time / duration) * 100);
}
}
$(".execution .progress-bar").css({
"width": progress + "%"
});
}
});
现在,我想要一个AJAX代码,该代码将首先上传我的文件并显示“上传进度”,然后它将在php FFMPEG中执行我的视频并显示“执行进度”