I want to create a program that allows the user to 1) Upload a video 2) Have it fed to some program , and 3) Have that program translate the video into some type of data url or blob protocal (but for videos…)
I understnad that there might be some challenges in this as a URL can only store so much and a video has a lot of data, but any help would be appreciated. I’m not the best in JS, so very step-by-step answers would be extra-helpful. Thanks!
I tried having a simple user video upload sequence as an mp4 and converting the bytes to Base64. I’m assuming from this point it can be transfered into some decoding URL?
<!DOCTYPE html>
<html lang="en">
<head>
<title>MP4 to Base64 Converter</title>
</head>
<body>
<h1>MP4 to Base64</h1>
<input type="file" id="fileInput" accept="video/mp4">
<button id="convertButton">Convert</button>
<h2>Output (Base64):</h2>
<textarea id="base64Output" rows="10" cols="80" readonly></textarea>
<script>
document.getElementById('convertButton').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file && file.type === 'video/mp4') {
const reader = new FileReader();
reader.onloadend = function() {
const base64String = reader.result.split(',')[1];
document.getElementById('base64Output').value = base64String;
};
reader.readAsDataURL(file);
} else {
alert('Please upload a valid MP4 file.');
}
});
</script>
</body>
</html>