|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MP4 to TS Converter | Advanced Video Conversion</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.11.6/dist/ffmpeg.min.js"></script> |
|
|
<style> |
|
|
.dropzone { |
|
|
border: 2px dashed #3b82f6; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dropzone.active { |
|
|
border-color: #10b981; |
|
|
background-color: #f0fdf4; |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
#videoPreview { |
|
|
max-width: 100%; |
|
|
max-height: 200px; |
|
|
} |
|
|
.settings-panel { |
|
|
transition: all 0.3s ease; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.settings-panel.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
.conversion-log { |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
font-family: monospace; |
|
|
background-color: #1e293b; |
|
|
color: #f8fafc; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
.log-entry { |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
.log-info { |
|
|
color: #60a5fa; |
|
|
} |
|
|
.log-warning { |
|
|
color: #fbbf24; |
|
|
} |
|
|
.log-error { |
|
|
color: #f87171; |
|
|
} |
|
|
.log-success { |
|
|
color: #4ade80; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-blue-600 mb-2">Advanced MP4 to TS Converter</h1> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Convert MP4 videos to TS format with full control over conversion parameters</p> |
|
|
</header> |
|
|
|
|
|
<main class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> |
|
|
|
|
|
<div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6"> |
|
|
<div class="flex flex-col items-center justify-center"> |
|
|
<i class="fas fa-file-video text-5xl text-blue-500 mb-4"></i> |
|
|
<h2 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop MP4 File Here</h2> |
|
|
<p class="text-gray-500 mb-4">or click to browse your files</p> |
|
|
<input type="file" id="fileInput" class="hidden" accept="video/mp4"> |
|
|
<button id="browseBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition"> |
|
|
Select File |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="fileInfo" class="hidden mb-6"> |
|
|
<div class="flex items-center justify-between bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-video text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h3 id="fileName" class="font-medium text-gray-800"></h3> |
|
|
<p id="fileSize" class="text-sm text-gray-500"></p> |
|
|
<p id="fileDuration" class="text-sm text-gray-500"></p> |
|
|
<p id="fileResolution" class="text-sm text-gray-500"></p> |
|
|
</div> |
|
|
</div> |
|
|
<button id="removeFile" class="text-red-500 hover:text-red-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="videoPreviewContainer" class="hidden mb-6"> |
|
|
<h3 class="text-lg font-medium text-gray-700 mb-3">Video Preview</h3> |
|
|
<div class="flex justify-center bg-gray-100 rounded-lg p-4"> |
|
|
<video id="videoPreview" controls class="rounded"></video> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center justify-between cursor-pointer" id="settingsToggle"> |
|
|
<h3 class="text-lg font-medium text-gray-700">Advanced Conversion Settings</h3> |
|
|
<i class="fas fa-chevron-down text-gray-500 transition-transform" id="settingsIcon"></i> |
|
|
</div> |
|
|
<div class="settings-panel mt-3" id="settingsPanel"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Video Codec</label> |
|
|
<select id="videoCodec" class="w-full p-2 border border-gray-300 rounded"> |
|
|
<option value="libx264">H.264 (libx264)</option> |
|
|
<option value="libx265">H.265 (libx265)</option> |
|
|
<option value="mpeg2video">MPEG-2</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Video Bitrate (kbps)</label> |
|
|
<input type="number" id="videoBitrate" value="2000" min="500" max="20000" class="w-full p-2 border border-gray-300 rounded"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Audio Codec</label> |
|
|
<select id="audioCodec" class="w-full p-2 border border-gray-300 rounded"> |
|
|
<option value="aac">AAC</option> |
|
|
<option value="mp3">MP3</option> |
|
|
<option value="ac3">AC3</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Audio Bitrate (kbps)</label> |
|
|
<input type="number" id="audioBitrate" value="128" min="64" max="320" class="w-full p-2 border border-gray-300 rounded"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Segment Duration (seconds)</label> |
|
|
<input type="number" id="segmentDuration" value="10" min="2" max="60" class="w-full p-2 border border-gray-300 rounded"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label> |
|
|
<select id="outputFormat" class="w-full p-2 border border-gray-300 rounded"> |
|
|
<option value="ts">TS (Transport Stream)</option> |
|
|
<option value="m3u8">HLS (M3U8 Playlist)</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="progressContainer" class="hidden mb-6"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Conversion Progress</span> |
|
|
<span id="progressPercent" class="text-sm font-medium text-gray-700">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="progressBar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="statusMessage" class="text-sm text-gray-500 mt-2"></div> |
|
|
|
|
|
|
|
|
<div id="conversionLogContainer" class="mt-4 hidden"> |
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Conversion Log</h4> |
|
|
<div id="conversionLog" class="conversion-log"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="convertBtn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-8 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
|
|
<i class="fas fa-cog animate-spin hidden mr-2" id="convertSpinner"></i> |
|
|
Convert to TS |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="downloadSection" class="hidden mt-8"> |
|
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-2xl text-green-500 mr-3"></i> |
|
|
<div> |
|
|
<h3 class="font-medium text-green-800">Conversion Complete!</h3> |
|
|
<p class="text-sm text-green-600">Your file is ready to download</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<button id="downloadBtn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-lg transition"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="mt-12 text-center text-gray-500 text-sm"> |
|
|
<p>Advanced MP4 to TS Converter - Uses FFmpeg.wasm for in-browser conversion. No files are uploaded to any server.</p> |
|
|
<p class="mt-2">Note: First conversion may take longer as FFmpeg needs to load (~30MB).</p> |
|
|
<p class="mt-2">© 2023 Video Converter Tool. All rights reserved.</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const dropzone = document.getElementById('dropzone'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const browseBtn = document.getElementById('browseBtn'); |
|
|
const fileInfo = document.getElementById('fileInfo'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
const fileSize = document.getElementById('fileSize'); |
|
|
const fileDuration = document.getElementById('fileDuration'); |
|
|
const fileResolution = document.getElementById('fileResolution'); |
|
|
const removeFile = document.getElementById('removeFile'); |
|
|
const videoPreviewContainer = document.getElementById('videoPreviewContainer'); |
|
|
const videoPreview = document.getElementById('videoPreview'); |
|
|
const convertBtn = document.getElementById('convertBtn'); |
|
|
const convertSpinner = document.getElementById('convertSpinner'); |
|
|
const progressContainer = document.getElementById('progressContainer'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const progressPercent = document.getElementById('progressPercent'); |
|
|
const statusMessage = document.getElementById('statusMessage'); |
|
|
const conversionLogContainer = document.getElementById('conversionLogContainer'); |
|
|
const conversionLog = document.getElementById('conversionLog'); |
|
|
const downloadSection = document.getElementById('downloadSection'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
const settingsToggle = document.getElementById('settingsToggle'); |
|
|
const settingsPanel = document.getElementById('settingsPanel'); |
|
|
const settingsIcon = document.getElementById('settingsIcon'); |
|
|
|
|
|
|
|
|
const { createFFmpeg, fetchFile } = FFmpeg; |
|
|
const ffmpeg = createFFmpeg({ |
|
|
log: true, |
|
|
corePath: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js', |
|
|
progress: ({ ratio }) => { |
|
|
|
|
|
const percent = Math.round(ratio * 100); |
|
|
updateProgress(percent); |
|
|
statusMessage.textContent = `Processing: ${percent}% complete`; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
ffmpeg.setLogger(({ type, message }) => { |
|
|
if (!conversionLogContainer.classList.contains('hidden')) { |
|
|
const logEntry = document.createElement('div'); |
|
|
logEntry.className = `log-entry log-${type}`; |
|
|
logEntry.textContent = message; |
|
|
conversionLog.appendChild(logEntry); |
|
|
conversionLog.scrollTop = conversionLog.scrollHeight; |
|
|
} |
|
|
}); |
|
|
|
|
|
let selectedFile = null; |
|
|
let convertedBlob = null; |
|
|
let videoMetadata = {}; |
|
|
|
|
|
|
|
|
settingsToggle.addEventListener('click', function() { |
|
|
settingsPanel.classList.toggle('open'); |
|
|
settingsIcon.classList.toggle('transform'); |
|
|
settingsIcon.classList.toggle('rotate-180'); |
|
|
}); |
|
|
|
|
|
|
|
|
browseBtn.addEventListener('click', function() { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', function(e) { |
|
|
if (e.target.files.length > 0) { |
|
|
handleFileSelection(e.target.files[0]); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
dropzone.classList.add('active'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropzone.classList.remove('active'); |
|
|
} |
|
|
|
|
|
dropzone.addEventListener('drop', function(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const file = dt.files[0]; |
|
|
if (file) { |
|
|
handleFileSelection(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function handleFileSelection(file) { |
|
|
if (!file.type.match('video/mp4') && !file.name.match(/\.mp4$/i)) { |
|
|
showError('Please select an MP4 video file.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
selectedFile = file; |
|
|
|
|
|
|
|
|
fileName.textContent = file.name; |
|
|
fileSize.textContent = `Size: ${formatFileSize(file.size)}`; |
|
|
fileInfo.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
convertBtn.disabled = false; |
|
|
|
|
|
|
|
|
const videoURL = URL.createObjectURL(file); |
|
|
videoPreview.src = videoURL; |
|
|
videoPreviewContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
dropzone.classList.add('hidden'); |
|
|
|
|
|
|
|
|
extractVideoMetadata(videoURL); |
|
|
} |
|
|
|
|
|
|
|
|
function extractVideoMetadata(videoURL) { |
|
|
videoPreview.onloadedmetadata = function() { |
|
|
videoMetadata = { |
|
|
duration: videoPreview.duration, |
|
|
width: videoPreview.videoWidth, |
|
|
height: videoPreview.videoHeight |
|
|
}; |
|
|
|
|
|
fileDuration.textContent = `Duration: ${formatDuration(videoMetadata.duration)}`; |
|
|
fileResolution.textContent = `Resolution: ${videoMetadata.width}x${videoMetadata.height}`; |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function formatDuration(seconds) { |
|
|
const date = new Date(0); |
|
|
date.setSeconds(seconds); |
|
|
return date.toISOString().substr(11, 8); |
|
|
} |
|
|
|
|
|
|
|
|
removeFile.addEventListener('click', function() { |
|
|
resetConverter(); |
|
|
}); |
|
|
|
|
|
|
|
|
function formatFileSize(bytes) { |
|
|
if (bytes === 0) return '0 Bytes'; |
|
|
const k = 1024; |
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
|
|
} |
|
|
|
|
|
|
|
|
convertBtn.addEventListener('click', async function() { |
|
|
if (!selectedFile) return; |
|
|
|
|
|
|
|
|
progressContainer.classList.remove('hidden'); |
|
|
conversionLogContainer.classList.remove('hidden'); |
|
|
conversionLog.innerHTML = ''; |
|
|
statusMessage.textContent = "Initializing conversion..."; |
|
|
|
|
|
|
|
|
convertBtn.disabled = true; |
|
|
convertSpinner.classList.remove('hidden'); |
|
|
|
|
|
try { |
|
|
|
|
|
if (!ffmpeg.isLoaded()) { |
|
|
addLogEntry('Loading FFmpeg core (this may take a while on first run)...', 'info'); |
|
|
await ffmpeg.load(); |
|
|
addLogEntry('FFmpeg loaded successfully', 'success'); |
|
|
} |
|
|
|
|
|
addLogEntry('Reading input file...', 'info'); |
|
|
|
|
|
|
|
|
const inputName = 'input.mp4'; |
|
|
ffmpeg.FS('writeFile', inputName, await fetchFile(selectedFile)); |
|
|
|
|
|
|
|
|
const videoCodec = document.getElementById('videoCodec').value; |
|
|
const videoBitrate = document.getElementById('videoBitrate').value; |
|
|
const audioCodec = document.getElementById('audioCodec').value; |
|
|
const audioBitrate = document.getElementById('audioBitrate').value; |
|
|
const segmentDuration = document.getElementById('segmentDuration').value; |
|
|
const outputFormat = document.getElementById('outputFormat').value; |
|
|
|
|
|
|
|
|
addLogEntry('Starting video conversion...', 'info'); |
|
|
|
|
|
let outputName, command; |
|
|
|
|
|
if (outputFormat === 'm3u8') { |
|
|
outputName = 'output.m3u8'; |
|
|
command = [ |
|
|
'-i', inputName, |
|
|
'-c:v', videoCodec, |
|
|
'-b:v', `${videoBitrate}k`, |
|
|
'-c:a', audioCodec, |
|
|
'-b:a', `${audioBitrate}k`, |
|
|
'-hls_time', segmentDuration, |
|
|
'-hls_playlist_type', 'vod', |
|
|
'-f', 'hls', |
|
|
outputName |
|
|
]; |
|
|
} else { |
|
|
outputName = 'output.ts'; |
|
|
command = [ |
|
|
'-i', inputName, |
|
|
'-c:v', videoCodec, |
|
|
'-b:v', `${videoBitrate}k`, |
|
|
'-c:a', audioCodec, |
|
|
'-b:a', `${audioBitrate}k`, |
|
|
'-f', 'mpegts', |
|
|
outputName |
|
|
]; |
|
|
} |
|
|
|
|
|
addLogEntry(`Running FFmpeg command: ffmpeg ${command.join(' ')}`, 'info'); |
|
|
|
|
|
await ffmpeg.run(...command); |
|
|
|
|
|
|
|
|
addLogEntry('Conversion complete, reading output file...', 'info'); |
|
|
const data = ffmpeg.FS('readFile', outputName); |
|
|
|
|
|
|
|
|
convertedBlob = new Blob([data.buffer], { |
|
|
type: outputFormat === 'm3u8' ? 'application/x-mpegURL' : 'video/mp2t' |
|
|
}); |
|
|
|
|
|
|
|
|
conversionComplete(); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Conversion error:', error); |
|
|
addLogEntry(`Error: ${error.message}`, 'error'); |
|
|
statusMessage.textContent = `Error: ${error.message}`; |
|
|
convertSpinner.classList.add('hidden'); |
|
|
convertBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function addLogEntry(message, type = 'info') { |
|
|
const logEntry = document.createElement('div'); |
|
|
logEntry.className = `log-entry log-${type}`; |
|
|
logEntry.textContent = message; |
|
|
conversionLog.appendChild(logEntry); |
|
|
conversionLog.scrollTop = conversionLog.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function showError(message) { |
|
|
const errorDiv = document.createElement('div'); |
|
|
errorDiv.className = 'bg-red-50 border-l-4 border-red-500 p-4 mb-4'; |
|
|
errorDiv.innerHTML = ` |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-circle text-red-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-red-700">${message}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
dropzone.parentNode.insertBefore(errorDiv, dropzone.nextSibling); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
errorDiv.remove(); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
function updateProgress(percent) { |
|
|
progressBar.style.width = percent + '%'; |
|
|
progressPercent.textContent = Math.round(percent) + '%'; |
|
|
} |
|
|
|
|
|
function conversionComplete() { |
|
|
|
|
|
convertSpinner.classList.add('hidden'); |
|
|
|
|
|
|
|
|
downloadSection.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
statusMessage.textContent = "Conversion completed successfully!"; |
|
|
addLogEntry('Conversion process finished successfully', 'success'); |
|
|
} |
|
|
|
|
|
|
|
|
downloadBtn.addEventListener('click', function() { |
|
|
if (!convertedBlob) return; |
|
|
|
|
|
const url = URL.createObjectURL(convertedBlob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
|
|
|
const outputFormat = document.getElementById('outputFormat').value; |
|
|
const originalName = selectedFile.name.replace(/\.[^/.]+$/, ""); |
|
|
|
|
|
if (outputFormat === 'm3u8') { |
|
|
a.download = `${originalName}.m3u8`; |
|
|
} else { |
|
|
a.download = `${originalName}.ts`; |
|
|
} |
|
|
|
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
}); |
|
|
|
|
|
|
|
|
function resetConverter() { |
|
|
selectedFile = null; |
|
|
convertedBlob = null; |
|
|
videoMetadata = {}; |
|
|
|
|
|
|
|
|
fileInfo.classList.add('hidden'); |
|
|
videoPreviewContainer.classList.add('hidden'); |
|
|
progressContainer.classList.add('hidden'); |
|
|
conversionLogContainer.classList.add('hidden'); |
|
|
downloadSection.classList.add('hidden'); |
|
|
convertBtn.disabled = true; |
|
|
convertSpinner.classList.add('hidden'); |
|
|
progressBar.style.width = '0%'; |
|
|
progressPercent.textContent = '0%'; |
|
|
statusMessage.textContent = ''; |
|
|
|
|
|
|
|
|
dropzone.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
fileInput.value = ''; |
|
|
|
|
|
|
|
|
if (videoPreview.src) { |
|
|
URL.revokeObjectURL(videoPreview.src); |
|
|
videoPreview.src = ''; |
|
|
} |
|
|
|
|
|
|
|
|
fileDuration.textContent = ''; |
|
|
fileResolution.textContent = ''; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
