<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to Video Download</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
textarea {
width: 80%;
height: 100px;
margin-bottom: 20px;
}
video {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Text to Video</h1>
<textarea id="textInput" placeholder="Enter your text here"></textarea><br>
<button id="generateVideo">Generate Video</button>
<br>
<video id="videoPreview" controls style="display: none;"></video>
<br>
<a id="downloadLink" style="display: none;">Download Video</a>
<script>
document.getElementById('generateVideo').addEventListener('click', function () {
const text = document.getElementById('textInput').value;
if (!text) {
alert('Please enter some text!');
return;
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1280;
canvas.height = 720;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '40px Arial';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
canvas.toBlob(function (blob) {
const video = document.getElementById('videoPreview');
const downloadLink = document.getElementById('downloadLink');
const url = URL.createObjectURL(blob);
video.src = url;
video.style.display = 'block';
downloadLink.href = url;
downloadLink.download = 'text-to-video.mp4';
downloadLink.textContent = 'Download Video';
downloadLink.style.display = 'inline-block';
}, 'video/mp4');
});
</script>
</body>
</html>
No comments:
Post a Comment