Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Processing</title> | |
| <!-- Add some basic styling for better visuals --> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f3f3f3; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .form-container { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| width: 300px; | |
| } | |
| label { | |
| font-size: 16px; | |
| margin-bottom: 5px; | |
| color: #333; | |
| } | |
| input, select, button { | |
| width: 100%; | |
| padding: 10px; | |
| margin: 10px 0; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| box-sizing: border-box; | |
| } | |
| input[type="file"] { | |
| padding: 5px; | |
| } | |
| button { | |
| background-color: #007BFF; | |
| color: #fff; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| .options-container { | |
| margin-top: 10px; | |
| padding-left: 15px; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| #copy-streams-container { | |
| background-color: #f9f9f9; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| margin-top: 15px; | |
| } | |
| #copy-streams-container label { | |
| font-size: 14px; | |
| color: #555; | |
| } | |
| .form-container select, | |
| .form-container input { | |
| background-color: #f9f9f9; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="form-container"> | |
| <h1>Video Processing</h1> | |
| <form id="video-form" action="/process" method="POST" enctype="multipart/form-data"> | |
| <label for="video">Select Video:</label> | |
| <input type="file" name="video" id="video" required><br><br> | |
| <label for="action">Select Action:</label> | |
| <select name="action" id="action" required> | |
| <option value="Convert Format">Convert Format</option> | |
| <option value="Trim Video">Trim Video</option> | |
| <option value="Resize Video">Resize Video</option> | |
| <option value="Extract Audio">Extract Audio</option> | |
| <option value="Extract Frames">Extract Frames</option> | |
| <option value="Change Video Speed">Change Video Speed</option> | |
| </select><br><br> | |
| <!-- Show Copy Streams checkbox only for Convert Format and Trim Video --> | |
| <div id="copy-streams-container" class="hidden"> | |
| <label for="copy_streams">Copy Streams (No Re-encoding):</label> | |
| <input type="checkbox" name="copy_streams" id="copy_streams"><br><br> | |
| </div> | |
| <!-- Inputs for Convert Format action --> | |
| <div id="format-options" class="hidden options-container"> | |
| <label for="format">Select Output Format:</label> | |
| <select name="format" id="format"> | |
| <option value="mp4">MP4</option> | |
| <option value="avi">AVI</option> | |
| <option value="mkv">MKV</option> | |
| <option value="mov">MOV</option> | |
| <option value="flv">FLV</option> | |
| <option value="webm">WEBM</option> | |
| </select><br><br> | |
| </div> | |
| <!-- Inputs for Trim Video action --> | |
| <div id="trim-options" class="hidden options-container"> | |
| <label for="start_time">Start Time (for Trim Video):</label> | |
| <input type="text" name="start_time" id="start_time"><br><br> | |
| <label for="duration">Duration (for Trim Video):</label> | |
| <input type="text" name="duration" id="duration"><br><br> | |
| </div> | |
| <!-- Inputs for Resize Video action --> | |
| <div id="resize-options" class="hidden options-container"> | |
| <label for="width">Width (for Resize Video):</label> | |
| <input type="text" name="width" id="width"><br><br> | |
| <label for="height">Height (for Resize Video):</label> | |
| <input type="text" name="height" id="height"><br><br> | |
| </div> | |
| <!-- Inputs for Change Video Speed action --> | |
| <div id="speed-options" class="hidden options-container"> | |
| <label for="speed_factor">Speed Factor (for Change Video Speed):</label> | |
| <input type="text" name="speed_factor" id="speed_factor"><br><br> | |
| </div> | |
| <button type="submit">Submit</button> | |
| </form> | |
| </div> | |
| <script> | |
| // Show or hide the corresponding inputs based on selected action | |
| document.getElementById('action').addEventListener('change', function() { | |
| const action = this.value; | |
| const copyStreamsContainer = document.getElementById('copy-streams-container'); | |
| const formatOptions = document.getElementById('format-options'); | |
| const trimOptions = document.getElementById('trim-options'); | |
| const resizeOptions = document.getElementById('resize-options'); | |
| const speedOptions = document.getElementById('speed-options'); | |
| // Hide all extra options initially | |
| formatOptions.classList.add('hidden'); | |
| trimOptions.classList.add('hidden'); | |
| resizeOptions.classList.add('hidden'); | |
| speedOptions.classList.add('hidden'); | |
| copyStreamsContainer.classList.add('hidden'); | |
| // Show options based on selected action | |
| if (action === 'Trim Video') { | |
| trimOptions.classList.remove('hidden'); | |
| copyStreamsContainer.classList.remove('hidden'); // Show the copy streams option for Trim Video | |
| } else if (action === 'Resize Video') { | |
| resizeOptions.classList.remove('hidden'); | |
| } else if (action === 'Change Video Speed') { | |
| speedOptions.classList.remove('hidden'); | |
| } else if (action === 'Convert Format') { | |
| formatOptions.classList.remove('hidden'); // Show the format selection for Convert Format | |
| copyStreamsContainer.classList.remove('hidden'); // Show the copy streams option for Convert Format | |
| } | |
| }); | |
| // Trigger the change event to set initial visibility based on the default selection | |
| document.getElementById('action').dispatchEvent(new Event('change')); | |
| </script> | |
| </body> | |
| </html> |