Spaces:

RandomPersonRR
/

Video_tools

Paused

App Files Files Community

RandomPersonRR commited on Nov 17, 2024

Commit

3a32f23

verified ·

1 Parent(s): b74a135

Update html.html

Browse files

Files changed (1) hide show

html.html +16 -11

html.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Video Processing</title>
-    <!-- Styling for better visuals -->
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -83,6 +83,11 @@
             font-size: 14px;
             color: #555;
         }
     </style>
 </head>
 <body>
@@ -102,13 +107,13 @@
                 <option value="Change Video Speed">Change Video Speed</option>
             </select><br><br>
-            <!-- Copy Streams option shown 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>
-            <!-- Format selection for Convert Format action -->
             <div id="format-options" class="hidden options-container">
                 <label for="format">Select Output Format:</label>
                 <select name="format" id="format">
@@ -121,7 +126,7 @@
                 </select><br><br>
             </div>
-            <!-- Trim Video inputs -->
             <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>
@@ -130,7 +135,7 @@
                 <input type="text" name="duration" id="duration"><br><br>
             </div>
-            <!-- Resize Video inputs -->
             <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>
@@ -139,7 +144,7 @@
                 <input type="text" name="height" id="height"><br><br>
             </div>
-            <!-- Change Video Speed inputs -->
             <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>
@@ -150,7 +155,7 @@
     </div>
     <script>
-        // Show/hide inputs based on selected action
         document.getElementById('action').addEventListener('change', function() {
             const action = this.value;
             const copyStreamsContainer = document.getElementById('copy-streams-container');
@@ -169,18 +174,18 @@
             // Show options based on selected action
             if (action === 'Trim Video') {
                 trimOptions.classList.remove('hidden');
-                copyStreamsContainer.classList.remove('hidden');  // Show 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');
-                copyStreamsContainer.classList.remove('hidden');  // Show for Convert Format
             }
         });
-        // Trigger the change event to set initial visibility
         document.getElementById('action').dispatchEvent(new Event('change'));
     </script>
 </body>

     <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;
             font-size: 14px;
             color: #555;
         }
+        .form-container select,
+        .form-container input {
+            background-color: #f9f9f9;
+        }
     </style>
 </head>
 <body>
                 <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">
                 </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>
                 <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>
                 <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>
     <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');
             // 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>