I am create a video upload program where we upload video, compress it using js/jquery and then upload it on server using php
I compressed the video successfully and preview the compressed video blob below and it works perfectly
<video id="videoPreview" controls="" src="blob:http://localhost/64f7b2ec-3fe0-4ede-a0eb-b655c7484cae" style="display: block;"></video>
And when i try to save the blob to server the audio inside the video is removed automatically
Here is my jquery code and PHP code
jQuery Code
$('#uploadBtn').on('click', function()
{
if (!compressedBlob) return;
const formData = new FormData();
formData.append('compressedVideo', compressedBlob, 'compressed_' + originalFile.name.replace(/.[^/.]+$/, '') + '.mp4');
$.ajax({
url: '',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response)
{
alert("Uploaded");
},
error: function(xhr, status, error)
{
alert("Error");
}
});
});
PHP code
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['compressedVideo']))
{
$uploadDir = 'uploads/';
if (!file_exists($uploadDir)) mkdir($uploadDir, 0777, true);
$fileName = uniqid() . '.mp4';
$targetPath = $uploadDir . $fileName;
if (move_uploaded_file($_FILES['compressedVideo']['tmp_name'], $targetPath))
{
echo json_encode(['success' => true, 'filePath' => $targetPath]);
}
else
{
echo json_encode(['success' => false, 'message' => 'Upload failed']);
}
exit;
}
?>
How to do this using javascript/jquery and php
Just to all you know this is my compression process using javascirpt
Compression code
$('#videoInput').on('change', function(e)
{
preview_compress_video(e);
});
async function preview_compress_video(e)
{
resetState();
const file = e.target.files[0];
if (!file) return;
originalFile = file;
// Setup video preview
const video = $('#videoPreview')[0];
video.src = URL.createObjectURL(file);
video.style.display = 'block';
video.onloadedmetadata = function()
{
originalDuration = video.duration;
};
// Compression handler
if (!originalFile) return;
// Use a hidden video element for processing
const processingVideo = $('#hiddenVideo')[0];
processingVideo.src = URL.createObjectURL(originalFile);
// Wait for hidden video to load
await new Promise((resolve) => {
processingVideo.onloadedmetadata = resolve;
});
try
{
// Setup MediaRecorder with proper options
const stream = processingVideo.captureStream();
var bitrate="500000";
const options = {
audioBitsPerSecond: 128000,
videoBitsPerSecond: bitrate,
mimeType: 'video/mp4'
};
mediaRecorder = new MediaRecorder(stream, options);
const chunks = [];
// Event handlers
mediaRecorder.ondataavailable = function(e) {
if (e.data.size > 0) {
chunks.push(e.data);
}
};
mediaRecorder.onstop = function() {
//compressedBlob = new Blob(chunks, { type: 'video/webm' });
compressedBlob = new Blob(chunks, { type: 'video/mp4' });
// Update preview with compressed version
const compressedVideo = $('#videoPreview')[0];
compressedVideo.src = URL.createObjectURL(compressedBlob);
compressedVideo.onloadedmetadata = function()
{
$('#compressProgress').val(100);
};
};
mediaRecorder.onerror = function(e) {
$('#status').text('Compression error: ' + e.toString());
resetState();
};
// Start recording
mediaRecorder.start(100); // Collect data every 100ms
// Progress tracking based on time
const startTime = Date.now();
recordingTimer = setInterval(() => {
const elapsed = Date.now() - startTime;
const progress = Math.min(100, (elapsed / (originalDuration * 1000)) * 100);
$('#compressProgress').val(progress);
}, 100);
// Play the hidden video (muted)
processingVideo.muted = true;
processingVideo.currentTime = 0;
await processingVideo.play();
// Schedule recording stop after full duration
setTimeout(() => {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop();
}
if (recordingTimer) clearInterval(recordingTimer);
}, originalDuration * 1000);
}
catch (error)
{
$('#status').text('Error: ' + error.message);
resetState();
}
}
