Here’s a simple PHP script that achieves what you’re looking for. We’ll create an HTML file upload form with a progress bar for the upload and conversion process, a text input for the watermark, and a PHP script to handle the file upload, watermarking using FFmpeg, and providing a download link after the conversion.
1. HTML Form with File Upload and Progress Bar
Create an index.html file with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Watermark and Conversion</title>
<style>
.progress {
width: 100%;
background-color: #f3f3f3;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.progress-bar {
width: 0%;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>
</head>
<body>
<h2>Upload File and Add Watermark</h2>
<form id="uploadForm" enctype="multipart/form-data">
<label for="file">Select file:</label><br>
<input type="file" id="file" name="file" required><br><br>
<label for="watermark">Watermark Text:</label><br>
<input type="text" id="watermark" name="watermark" required><br><br>
<div class="progress">
<div class="progress-bar" id="uploadProgress">0%</div>
</div>
<button type="submit">Upload and Convert</button>
</form>
<div id="result"></div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault();
let formData = new FormData(this);
let xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
let percentComplete = Math.round((e.loaded / e.total) * 100);
document.getElementById('uploadProgress').style.width = percentComplete + '%';
document.getElementById('uploadProgress').textContent = percentComplete + '%';
}
});
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.open('POST', 'upload.php', true);
xhr.send(formData);
});
</script>
</body>
</html>
2. PHP Script to Handle File Upload, Watermarking, and Conversion
Create a file named upload.php with the following content:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$targetDir = "uploads/";
if (!file_exists($targetDir)) {
mkdir($targetDir, 0777, true);
}
$fileName = basename($_FILES["file"]["name"]);
$targetFilePath = $targetDir . $fileName;
$watermarkText = $_POST['watermark'];
// Upload file
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)) {
// Generate a unique name for the output file
$outputFileName = $targetDir . uniqid() . "_watermarked.mp4";
// FFmpeg command to add watermark
$cmd = "ffmpeg -i $targetFilePath -vf \"drawtext=text='$watermarkText':fontcolor=white:fontsize=24:x=10:y=H-th-10\" -codec:a copy $outputFileName 2>&1";
// Execute the command
$output = shell_exec($cmd);
if (file_exists($outputFileName)) {
echo "<p>File has been uploaded and converted successfully.</p>";
echo "<a href='$outputFileName' download>Download Converted File</a>";
} else {
echo "<p>Conversion failed. Please try again.</p>";
}
} else {
echo "<p>File upload failed. Please try again.</p>";
}
} else {
echo "<p>Invalid request.</p>";
}
. Explanation
- HTML Form (
index.html):- A file input is provided for the user to upload a video file.
- A text input allows the user to specify the watermark text.
- A progress bar shows the upload progress.
- PHP Script (
upload.php):- The script handles the file upload and saves it to the
uploads/directory. - The script uses FFmpeg to add the specified watermark to the video.
- After conversion, a download link is generated for the user to download the watermarked video.
- The script handles the file upload and saves it to the
4. Requirements
- Make sure FFmpeg is installed and accessible on your server.
- Set the appropriate permissions on the
uploads/directory. - Make sure shell_exec() enable.
- Make sure 777 permissions on the uploads/ director.
