71 lines
2.5 KiB
HTML
71 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Compressor</title>
|
|
<script defer src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
|
|
<script defer src="/assets/scripts/ui.js"></script>
|
|
<script defer type="module" src="/assets/scripts/main.js"></script>
|
|
<link rel="stylesheet" href="/assets/styles/main.css">
|
|
<link rel="stylesheet" href="/assets/styles/ui.css">
|
|
<link rel="stylesheet" href="/assets/styles/file-picker-section.css">
|
|
<link rel="stylesheet" href="/assets/styles/loading-section.css">
|
|
<link rel="stylesheet" href="/assets/styles/result-section.css">
|
|
</head>
|
|
<body>
|
|
<h1>Video Compressor</h1>
|
|
<p>Compress video files to a specific file size, so you can upload them to your favorite social media and messaging apps!</p>
|
|
|
|
<section id="file-picker-section">
|
|
<div id="file-drop-area" tabindex="0">
|
|
<span>Drag and drop a file here!</span>
|
|
</div>
|
|
<input id="file-input" type="file" accept="video/*" tabindex="-1">
|
|
<div id="file-input-spacing" style="margin-top: -1rem">
|
|
<button class="simple">.</button>
|
|
</div>
|
|
|
|
<video id="uploaded-video" controls autoplay></video>
|
|
<button id="change-file" class="simple">Change video</button>
|
|
|
|
<input id="filesize" type="number" value="10" size="3" placeholder="#" style="margin-top: 1rem"><!--
|
|
|
|
--><select id="filesize-unit">
|
|
<option value="kb">KB</option>
|
|
<option value="mb" selected>MB</option>
|
|
</select>
|
|
|
|
<button id="compress" class="primary">Compress</button>
|
|
</section>
|
|
|
|
<section id="loading-section" style="opacity: 0; display: none;">
|
|
<h3 id="loading-title">Please wait...</h3>
|
|
<p id="loading-description">Your video is being compressed. This may take a while.</p>
|
|
|
|
<div id="progress-container">
|
|
<div id="progress-indicator"></div>
|
|
</div>
|
|
|
|
<p id="progress-percentage">0%</p>
|
|
|
|
<p><label><input id="notify-checkbox" type="checkbox"> Notify on finish</label></p>
|
|
|
|
<button id="cancel" class="simple">Cancel</button>
|
|
</section>
|
|
|
|
<section id="result-section" style="opacity: 0; display: none;">
|
|
<h4 id="result-title">Your video has been compressed!</h4>
|
|
<p>Result size: <span id="result-size"></span></p>
|
|
|
|
<video id="compressed-video" controls autoplay></video><br>
|
|
|
|
<button id="download" class="primary">Download</button><br>
|
|
<button id="share" class="secondary">Share video</button><br>
|
|
|
|
<button id="back" class="simple">Go back</button>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
|