38 lines
1.2 KiB
HTML
38 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Video Compressor</title>
|
|
<script defer src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
|
|
<script defer src="/assets/scripts/main.js"></script>
|
|
<link rel="stylesheet" href="/assets/style/main.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" onclick="selectFile()" onkeydown="['Enter', 'Space'].includes(event.code) && selectFile()" tabindex="0">
|
|
<span>Drag and drop a file here!</span>
|
|
</div>
|
|
<input id="file-input" type="file" accept="video/*" tabindex="-1">
|
|
|
|
<input id="filesize" type="number" value="10" size="3" placeholder="#"><!--
|
|
|
|
--><select id="filesize-unit">
|
|
<option value="K">KB</option>
|
|
<option value="M" selected>MB</option>
|
|
<option value="G">GB</option>
|
|
</select>
|
|
|
|
<button id="compress" onclick="compress()">Go!</button>
|
|
</section>
|
|
|
|
<section id="loading-section" style="opacity: 0; display: none;">
|
|
<h3>Please wait...</h3>
|
|
<p>This may take a while</p>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
|