Spaces:
Sleeping
Sleeping
File size: 3,155 Bytes
f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a c950606 f4f184a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FFmpeg Command Executor</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 100px;
}
.log, .player {
margin-top: 20px;
}
#videoPlayer {
display: none;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>FFmpeg Command Executor</h1>
<!-- File upload form -->
<form id="uploadForm" enctype="multipart/form-data">
<label for="fileInput">Upload a file:</label>
<input type="file" id="fileInput" name="file" required>
<br><br>
<input type="submit" value="Upload">
</form>
<!-- Command input -->
<h2>FFmpeg Command</h2>
<textarea id="commandInput" placeholder="Enter FFmpeg command here..."></textarea>
<br>
<button id="runCommand">Run Command</button>
<!-- Logs and video player -->
<div class="log">
<h2>FFmpeg Logs</h2>
<pre id="logOutput"></pre>
</div>
<div class="player">
<h2>Processed Video</h2>
<video id="videoPlayer" controls>
<source id="videoSource" src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => response.text())
.then(text => {
document.getElementById('logOutput').textContent = 'File uploaded successfully.';
}).catch(error => {
document.getElementById('logOutput').textContent = 'Error uploading file: ' + error.message;
});
});
document.getElementById('runCommand').addEventListener('click', function() {
const command = document.getElementById('commandInput').value;
fetch('/run', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ command: command })
}).then(response => response.json())
.then(data => {
document.getElementById('logOutput').textContent = data.logs;
if (data.videoUrl) {
const videoPlayer = document.getElementById('videoPlayer');
const videoSource = document.getElementById('videoSource');
videoSource.src = data.videoUrl;
videoPlayer.style.display = 'block';
}
}).catch(error => {
document.getElementById('logOutput').textContent = 'Error running command: ' + error.message;
});
});
</script>
</body>
</html> |