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