|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Video Processing</title> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
formatOptions.classList.add('hidden'); |
|
|
trimOptions.classList.add('hidden'); |
|
|
resizeOptions.classList.add('hidden'); |
|
|
speedOptions.classList.add('hidden'); |
|
|
copyStreamsContainer.classList.add('hidden'); |
|
|
|
|
|
|
|
|
if (action === 'Trim Video') { |
|
|
trimOptions.classList.remove('hidden'); |
|
|
copyStreamsContainer.classList.remove('hidden'); |
|
|
} 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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('action').dispatchEvent(new Event('change')); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
