Image To Video Converter Using HTML JQuery
February 11, 2024
To Create this, First of all, you will have to create a page and name it index.php. To access the file on our local devices we will define the one input type file. We will define multiple attributes in the input type due to which we can select multiple images. In the input type we will define one more attribute and its name is accept.
If we don’t define accept attributes in the input type then it accepts all the files like pdf, docs, etc.
HTML files
<h1>Image to Video Converter</h1><input type="file" id="imageInput" accept="image/*" multiple>
<button id="startChnage">Start Conversion</button>
<video id="show_vide" controls></video>
For the scripting, we need to include jQuery library link
jQuery library: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>JavaScripts
<-----------------------------------------------------------> <script>
$(document).ready(function() {
const imageInput = $('#imageInput');
const startChnage = $('#startChnage');
const show_vide = $('#show_vide')[0];
let imageFiles = [];
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let stream;
let mediaRecorder;
let recordedChunks = [];
imageInput.on('change', function() {
imageFiles = Array.from(imageInput[0].files);
});
startChnage.on('click', async function() {
if (imageFiles.length === 0) {
alert('Please select one or more images.');
return;
} startChnage.prop('disabled', true);
canvas.width = show_vide.width = imageFiles[0].width || 640; canvas.height = show_vide.height = imageFiles[0].height || 480;
stream = canvas.captureStream();
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = function() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoUrl = URL.createObjectURL(blob);
show_vide.src = videoUrl;
show_vide.play();
};
mediaRecorder.start();
for (const imageFile of imageFiles) {
const image = new Image();
image.src = URL.createObjectURL(imageFile);
image.onload = function() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
stream.getVideoTracks()[0].requestFrame();
};
await new Promise(resolve => setTimeout(resolve, 1000)); // Delay between frames
}
mediaRecorder.stop();
});
});
</script>
<----------------------------------------------------------->
Here is the full script copy this code and use it for your project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image To Video Converter Using HTML jQuery </title>
</head>
<body>
<h2>Image To Video Converter Using HTML jQuery </h2>
<input type="file" id="imageInput" accept="image/*" multiple>
<button id="startChnage">Start Conversion</button>
<video id="show_vide" controls></video>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const imageInput = $('#imageInput');
const startChnage = $('#startChnage');
const show_vide = $('#show_vide')[0]; // Get the raw DOM element
let imageFiles = [];
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let stream;
let mediaRecorder;
let recordedChunks = [];
imageInput.on('change', function() {
imageFiles = Array.from(imageInput[0].files);
});
startChnage.on('click', async function() {
if (imageFiles.length === 0) {
alert('Please select one or more images.');
return;
}
startChnage.prop('disabled', true);
canvas.width = show_vide.width = imageFiles[0].width || 640;
canvas.height = show_vide.height = imageFiles[0].height || 480;
stream = canvas.captureStream();
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = function() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoUrl = URL.createObjectURL(blob);
show_vide.src = videoUrl;
show_vide.play();
};
mediaRecorder.start();
for (const imageFile of imageFiles) {
const image = new Image();
image.src = URL.createObjectURL(imageFile);
image.onload = function() {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
stream.getVideoTracks()[0].requestFrame();
}; await new Promise(resolve => setTimeout(resolve, 1000)); // Delay between frames
}
mediaRecorder.stop();
});
});
</script>
</body>
</html>