Spaces:
Sleeping
Sleeping
File size: 2,829 Bytes
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FFmpeg Web Interface</title>
</head>
<body>
<h1>FFmpeg Web Interface</h1>
<!-- File Upload Section -->
<h2>Upload File</h2>
<input type="file" id="fileUpload" />
<button onclick="uploadFile()">Upload</button>
<!-- HTML Audio Player -->
<h2>Audio Player</h2>
<audio id="audioPlayer" controls></audio>
<!-- HTML Video Player -->
<h2>Video Player</h2>
<video id="videoPlayer" controls width="600"></video>
<!-- Command Input -->
<h2>Command Input</h2>
<textarea id="commandInput" rows="4" cols="50" placeholder="Enter FFmpeg commands here..."></textarea>
<button onclick="executeCommand()">Execute Command</button>
<!-- Logs Section -->
<h2>Logs</h2>
<pre id="logs"></pre>
<script>
function uploadFile() {
const fileInput = document.getElementById('fileUpload');
const file = fileInput.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => response.text())
.then(data => {
document.getElementById('logs').textContent = data;
const audioPlayer = document.getElementById('audioPlayer');
const videoPlayer = document.getElementById('videoPlayer');
const fileUrl = URL.createObjectURL(file);
// Display appropriate player based on file type
if (file.type.startsWith('audio/')) {
audioPlayer.src = fileUrl;
audioPlayer.style.display = 'block';
videoPlayer.style.display = 'none';
} else if (file.type.startsWith('video/')) {
videoPlayer.src = fileUrl;
videoPlayer.style.display = 'block';
audioPlayer.style.display = 'none';
}
});
}
}
function executeCommand() {
const command = document.getElementById('commandInput').value;
fetch('/execute', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ command })
}).then(response => response.text())
.then(data => {
document.getElementById('logs').textContent = data;
});
}
</script>
</body>
</html> |