Click the above image for basic sourced and click following button for processing token source code.
Ethereum and EVM (ETC, BSC, AVAX-C-Chain, Polygon, etc).
Telegram Open Network (TON) decentralized application.
Solana decentralized application.
Tron decentralized application.
Near decentralized application.
Wax decentralized application.
Myalgo wallet for Algorand decentralized application.
Sync2 wallet for Vechain decentralized application.
Scatter wallet for EOS decentralized application.
Anchor Link wallet for EOS decentralized application.
Ontology decentralized application.
Rabbet wallet for Stellar Lumen decentralized application.
Freighter wallet for Stellar Lumen decentralized application.
Hive Signer for Hive decentralized application.
Hive Key Chain for Hive decentralized application.
Zilpay wallet for Zilliqa decentralized application.
Neoline wallet for Neo N2 decentralized application.
Neoline wallet for Neo N3 decentralized application.
Keplr wallet for Cosmos and other decentralized application.
Keeper wallet for Waves decentralized application.
IWallet for IOST decentralized application.
Video Trimmer in HTML CSS JS
Get 1000000 0FP0EXP Token to remove widget entirely!
Get 500000 0FP0EXP Token to remove my NFTS advertisements!
Reference
- FFMPEG WASM
- https://refreshless.com/nouislider
- github.com/gzuidhof/coi-serviceworker
- Acknowledgement to Google Gemini AI for helping writing the code.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Video Trimmer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
<style>
body { font-family: sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; }
video { width: 100%; margin-bottom: 20px; border-radius: 8px; background: #000; }
/* The Slider Container */
#slider-container { margin: 0 10px 30px 10px; }
/* Visual Styles */
.controls { display: flex; gap: 10px; align-items: center; }
.time-display { font-family: monospace; font-weight: bold; }
#download-link { display: none; color: white; background: #007bff; padding: 10px 20px; text-decoration: none; border-radius: 4px;}
button { padding: 10px 20px; cursor: pointer; }
/* Add this simple CSS to make them look nice */
.controls-wrapper {
display: flex;
gap: 20px;
margin-bottom: 20px;
align-items: center;
justify-content: center;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group input {
width: 80px;
padding: 5px;
font-size: 16px;
font-family: monospace;
}
</style>
</head>
<body>
<input type="file" id="upload" accept="video/*"><br><br>
<video id="video-element" controls playsinline></video>
<div id="slider-container"></div>
<div class="controls-wrapper">
<div class="input-group">
<label>Start (sec)</label>
<input type="number" id="val-start" step="0.01" min="0">
</div>
<button id="trim-btn" disabled>Trim Video</button>
<div class="input-group">
<label>End (sec)</label>
<input type="number" id="val-end" step="0.01" min="0">
</div>
</div>
<a id="download-link" download="trimmed.mp4" style="display:none; margin-top: 10px; text-align: center;">Download Trimmed Video</a>
<p id="message"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<script src="https://unpkg.com/coi-serviceworker@0.1.7/coi-serviceworker.min.js"></script>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.6/dist/ffmpeg.min.js"></script>
<script src="app.js"></script>
<script>
/**
* VIDEO TRIMMER ENGINE (HTML5 + FFmpeg.wasm)
*/
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
// UI Element Selectors
const video = document.getElementById('video-element');
const upload = document.getElementById('upload');
const slider = document.getElementById('slider-container');
const trimBtn = document.getElementById('trim-btn');
const message = document.getElementById('message');
const valStart = document.getElementById('val-start');
const valEnd = document.getElementById('val-end');
const downloadLink = document.getElementById('download-link');
let fileData = null;
/**
* 1. INITIALIZE FFMPEG
*/
const initFFmpeg = async () => {
try {
message.innerText = 'Loading FFmpeg Engine...';
await ffmpeg.load();
message.innerText = 'Engine Ready.';
trimBtn.disabled = false;
} catch (err) {
message.innerText = 'Error loading FFmpeg. Check console.';
console.error(err);
}
};
initFFmpeg();
/**
* 2. INITIALIZE SLIDER (noUiSlider)
*/
noUiSlider.create(slider, {
start: [0, 10], // Initial dummy values
connect: true,
range: { 'min': 0, 'max': 10 },
step: 0.01,
tooltips: false
});
slider.setAttribute('disabled', true); // Disable until video loads
/**
* 3. FILE UPLOAD HANDLER
*/
upload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
fileData = file;
const url = URL.createObjectURL(file);
video.src = url;
downloadLink.style.display = 'none';
message.innerText = 'Video loaded. Set your trim range.';
});
/**
* 4. VIDEO METADATA HANDLER
* Triggered when video duration is known
*/
video.addEventListener('loadedmetadata', () => {
const duration = video.duration;
// Update slider to match video length
slider.noUiSlider.updateOptions({
range: { 'min': 0, 'max': duration },
start: [0, duration]
});
slider.removeAttribute('disabled');
valStart.value = 0;
valEnd.value = duration.toFixed(2);
});
/**
* 5. SLIDER -> UI BINDING
* When slider moves, update input boxes and video frame
*/
slider.noUiSlider.on('update', (values, handle) => {
const value = parseFloat(values[handle]);
if (handle === 0) {
valStart.value = value.toFixed(2);
} else {
valEnd.value = value.toFixed(2);
}
});
// Seek video preview when dragging slider
slider.noUiSlider.on('slide', (values, handle) => {
video.currentTime = parseFloat(values[handle]);
video.pause();
});
/**
* 6. INPUT BOX -> SLIDER BINDING (Precision Editing)
* When user types a number, update the slider and video frame
*/
[valStart, valEnd].forEach((input, handle) => {
input.addEventListener('change', function() {
let newVal = parseFloat(this.value);
let currentValues = slider.noUiSlider.get().map(Number);
const duration = video.duration;
// Validation: Clamp to video duration
if (newVal < 0) newVal = 0;
if (newVal > duration) newVal = duration;
// Validation: Prevent handles from crossing
if (handle === 0 && newVal >= currentValues[1]) {
newVal = currentValues[1] - 0.1;
} else if (handle === 1 && newVal <= currentValues[0]) {
newVal = currentValues[0] + 0.1;
}
this.value = newVal.toFixed(2);
// Update Slider handles
let setArray = [null, null];
setArray[handle] = newVal;
slider.noUiSlider.set(setArray);
// Update Video Preview
video.currentTime = newVal;
});
});
/**
* 7. THE TRIM ACTION (FFmpeg Execution)
*/
trimBtn.addEventListener('click', async () => {
if (!fileData || !ffmpeg.isLoaded()) return;
trimBtn.disabled = true;
message.innerText = 'Processing... Please wait.';
const start = valStart.value;
const end = valEnd.value;
const duration = (parseFloat(end) - parseFloat(start)).toFixed(2);
// Write file to FFmpeg's Virtual File System
const inputName = 'input.mp4';
const outputName = 'output.mp4';
ffmpeg.FS('writeFile', inputName, await fetchFile(fileData));
/**
* COMMAND EXPLAINED:
* -ss : Start time (placed before -i for faster seeking)
* -i : Input file
* -t : Duration to cut
* -c copy : Stream Copy (Fastest, no re-encoding)
*/
await ffmpeg.run(
'-ss', start,
'-i', inputName,
'-t', duration,
'-c', 'copy',
outputName
);
// Read resulting file
const data = ffmpeg.FS('readFile', outputName);
// Create download URL
const blob = new Blob([data.buffer], { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.style.display = 'inline-block';
message.innerText = 'Trim complete!';
trimBtn.disabled = false;
// Cleanup virtual FS to save memory
ffmpeg.FS('unlink', inputName);
ffmpeg.FS('unlink', outputName);
});
</script>
</body>
</html>