Spaces:

KEXEL
/

convert

Running

App Files Files Community

KEXEL commited on May 10, 2025

Commit

03c264f

verified ·

1 Parent(s): 295879d

Update index.html

Browse files

Files changed (1) hide show

index.html +161 -19

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MP4 to TS Converter | Real 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>
@@ -31,13 +31,38 @@
         .settings-panel.open {
             max-height: 500px;
         }
     </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">MP4 to TS Converter</h1>
-            <p class="text-gray-600 max-w-2xl mx-auto">Convert your MP4 videos to TS (MPEG Transport Stream) format using browser-based FFmpeg</p>
         </header>
         <main class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
@@ -62,6 +87,8 @@
                         <div>
                             <h3 id="fileName" class="font-medium text-gray-800"></h3>
                             <p id="fileSize" class="text-sm text-gray-500"></p>
                         </div>
                     </div>
                     <button id="removeFile" class="text-red-500 hover:text-red-700">
@@ -81,15 +108,31 @@
             <!-- Conversion Settings -->
             <div class="mb-6">
                 <div class="flex items-center justify-between cursor-pointer" id="settingsToggle">
-                    <h3 class="text-lg font-medium text-gray-700">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 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 Bitrate (kbps)</label>
                             <input type="number" id="audioBitrate" value="128" min="64" max="320" class="w-full p-2 border border-gray-300 rounded">
@@ -119,6 +162,12 @@
                     <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>
             <!-- Convert Button -->
@@ -151,7 +200,7 @@
         </main>
         <footer class="mt-12 text-center text-gray-500 text-sm">
-            <p>MP4 to TS Converter - Uses FFmpeg.js 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>
@@ -166,6 +215,8 @@
             const fileInfo = document.getElementById('fileInfo');
             const fileName = document.getElementById('fileName');
             const fileSize = document.getElementById('fileSize');
             const removeFile = document.getElementById('removeFile');
             const videoPreviewContainer = document.getElementById('videoPreviewContainer');
             const videoPreview = document.getElementById('videoPreview');
@@ -175,6 +226,8 @@
             const progressBar = document.getElementById('progressBar');
             const progressPercent = document.getElementById('progressPercent');
             const statusMessage = document.getElementById('statusMessage');
             const downloadSection = document.getElementById('downloadSection');
             const downloadBtn = document.getElementById('downloadBtn');
             const settingsToggle = document.getElementById('settingsToggle');
@@ -185,6 +238,7 @@
             const { createFFmpeg, fetchFile } = FFmpeg;
             const ffmpeg = createFFmpeg({
                 log: true,
                 progress: ({ ratio }) => {
                     // 0 to 1 => 0 to 100
                     const percent = Math.round(ratio * 100);
@@ -193,8 +247,20 @@
                 }
             });
             let selectedFile = null;
             let convertedBlob = null;
             // Toggle settings panel
             settingsToggle.addEventListener('click', function() {
@@ -251,7 +317,7 @@
             // Handle file selection
             function handleFileSelection(file) {
                 if (!file.type.match('video/mp4') && !file.name.match(/\.mp4$/i)) {
-                    alert('Please select an MP4 video file.');
                     return;
                 }
@@ -259,18 +325,43 @@
                 // Display file info
                 fileName.textContent = file.name;
-                fileSize.textContent = formatFileSize(file.size);
                 fileInfo.classList.remove('hidden');
                 // Enable convert button
                 convertBtn.disabled = false;
                 // Show video preview
-                videoPreview.src = URL.createObjectURL(file);
                 videoPreviewContainer.classList.remove('hidden');
                 // Hide dropzone
                 dropzone.classList.add('hidden');
             }
             // Remove file
@@ -291,9 +382,11 @@
             convertBtn.addEventListener('click', async function() {
                 if (!selectedFile) return;
-                // Show progress
                 progressContainer.classList.remove('hidden');
-                statusMessage.textContent = "Loading FFmpeg...";
                 // Disable convert button and show spinner
                 convertBtn.disabled = true;
@@ -302,23 +395,27 @@
                 try {
                     // Load FFmpeg if not already loaded
                     if (!ffmpeg.isLoaded()) {
                         await ffmpeg.load();
                     }
-                    statusMessage.textContent = "Reading input file...";
                     // Write the file to FFmpeg's virtual file system
                     const inputName = 'input.mp4';
                     ffmpeg.FS('writeFile', inputName, await fetchFile(selectedFile));
                     // Get conversion settings
                     const videoBitrate = document.getElementById('videoBitrate').value;
                     const audioBitrate = document.getElementById('audioBitrate').value;
                     const segmentDuration = document.getElementById('segmentDuration').value;
                     const outputFormat = document.getElementById('outputFormat').value;
                     // Run FFmpeg command
-                    statusMessage.textContent = "Converting video...";
                     let outputName, command;
@@ -326,9 +423,9 @@
                         outputName = 'output.m3u8';
                         command = [
                             '-i', inputName,
-                            '-c:v', 'libx264',
                             '-b:v', `${videoBitrate}k`,
-                            '-c:a', 'aac',
                             '-b:a', `${audioBitrate}k`,
                             '-hls_time', segmentDuration,
                             '-hls_playlist_type', 'vod',
@@ -339,42 +436,80 @@
                         outputName = 'output.ts';
                         command = [
                             '-i', inputName,
-                            '-c:v', 'libx264',
                             '-b:v', `${videoBitrate}k`,
-                            '-c:a', 'aac',
                             '-b:a', `${audioBitrate}k`,
                             '-f', 'mpegts',
                             outputName
                         ];
                     }
                     await ffmpeg.run(...command);
                     // Read the result
-                    statusMessage.textContent = "Finalizing output...";
                     const data = ffmpeg.FS('readFile', outputName);
                     // Create download blob
-                    convertedBlob = new Blob([data.buffer], { type: outputFormat === 'm3u8' ? 'application/x-mpegURL' : 'video/mp2t' });
                     // Complete the process
                     conversionComplete();
                 } catch (error) {
                     console.error('Conversion error:', error);
                     statusMessage.textContent = `Error: ${error.message}`;
                     convertSpinner.classList.add('hidden');
                     convertBtn.disabled = false;
                 }
             });
             function updateProgress(percent) {
                 progressBar.style.width = percent + '%';
                 progressPercent.textContent = Math.round(percent) + '%';
             }
             function conversionComplete() {
-                // Hide progress and spinner
                 convertSpinner.classList.add('hidden');
                 // Show download section
@@ -382,6 +517,7 @@
                 // Update status
                 statusMessage.textContent = "Conversion completed successfully!";
             }
             // Download button
@@ -411,11 +547,13 @@
             function resetConverter() {
                 selectedFile = null;
                 convertedBlob = null;
                 // Reset UI
                 fileInfo.classList.add('hidden');
                 videoPreviewContainer.classList.add('hidden');
                 progressContainer.classList.add('hidden');
                 downloadSection.classList.add('hidden');
                 convertBtn.disabled = true;
                 convertSpinner.classList.add('hidden');
@@ -434,6 +572,10 @@
                     URL.revokeObjectURL(videoPreview.src);
                     videoPreview.src = '';
                 }
             }
         });
     </script>

 <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>
         .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>
                             <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">
             <!-- Conversion Settings -->
             <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 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>
+                <!-- Conversion Log -->
+                <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>
             <!-- Convert Button -->
         </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>
             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 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 { createFFmpeg, fetchFile } = FFmpeg;
             const ffmpeg = createFFmpeg({
                 log: true,
+                corePath: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js',
                 progress: ({ ratio }) => {
                     // 0 to 1 => 0 to 100
                     const percent = Math.round(ratio * 100);
                 }
             });
+            // Capture FFmpeg logs
+            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 = {};
             // Toggle settings panel
             settingsToggle.addEventListener('click', function() {
             // Handle file selection
             function handleFileSelection(file) {
                 if (!file.type.match('video/mp4') && !file.name.match(/\.mp4$/i)) {
+                    showError('Please select an MP4 video file.');
                     return;
                 }
                 // Display file info
                 fileName.textContent = file.name;
+                fileSize.textContent = `Size: ${formatFileSize(file.size)}`;
                 fileInfo.classList.remove('hidden');
                 // Enable convert button
                 convertBtn.disabled = false;
                 // Show video preview
+                const videoURL = URL.createObjectURL(file);
+                videoPreview.src = videoURL;
                 videoPreviewContainer.classList.remove('hidden');
                 // Hide dropzone
                 dropzone.classList.add('hidden');
+                // Extract video metadata
+                extractVideoMetadata(videoURL);
+            }
+            // Extract video metadata (duration, resolution)
+            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}`;
+                };
+            }
+            // Format duration (seconds to HH:MM:SS)
+            function formatDuration(seconds) {
+                const date = new Date(0);
+                date.setSeconds(seconds);
+                return date.toISOString().substr(11, 8);
             }
             // Remove file
             convertBtn.addEventListener('click', async function() {
                 if (!selectedFile) return;
+                // Show progress and log
                 progressContainer.classList.remove('hidden');
+                conversionLogContainer.classList.remove('hidden');
+                conversionLog.innerHTML = '';
+                statusMessage.textContent = "Initializing conversion...";
                 // Disable convert button and show spinner
                 convertBtn.disabled = true;
                 try {
                     // Load FFmpeg if not already loaded
                     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');
                     // Write the file to FFmpeg's virtual file system
                     const inputName = 'input.mp4';
                     ffmpeg.FS('writeFile', inputName, await fetchFile(selectedFile));
                     // Get conversion settings
+                    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;
                     // Run FFmpeg command
+                    addLogEntry('Starting video conversion...', 'info');
                     let outputName, command;
                         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',
                         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);
                     // Read the result
+                    addLogEntry('Conversion complete, reading output file...', 'info');
                     const data = ffmpeg.FS('readFile', outputName);
                     // Create download blob
+                    convertedBlob = new Blob([data.buffer], {
+                        type: outputFormat === 'm3u8' ? 'application/x-mpegURL' : 'video/mp2t'
+                    });
                     // Complete the process
                     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;
                 }
             });
+            // Add entry to conversion log
+            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;
+            }
+            // Show error message
+            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>
+                `;
+                // Insert after the dropzone
+                dropzone.parentNode.insertBefore(errorDiv, dropzone.nextSibling);
+                // Remove after 5 seconds
+                setTimeout(() => {
+                    errorDiv.remove();
+                }, 5000);
+            }
             function updateProgress(percent) {
                 progressBar.style.width = percent + '%';
                 progressPercent.textContent = Math.round(percent) + '%';
             }
             function conversionComplete() {
+                // Hide spinner
                 convertSpinner.classList.add('hidden');
                 // Show download section
                 // Update status
                 statusMessage.textContent = "Conversion completed successfully!";
+                addLogEntry('Conversion process finished successfully', 'success');
             }
             // Download button
             function resetConverter() {
                 selectedFile = null;
                 convertedBlob = null;
+                videoMetadata = {};
                 // Reset UI
                 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');
                     URL.revokeObjectURL(videoPreview.src);
                     videoPreview.src = '';
                 }
+                // Clear metadata display
+                fileDuration.textContent = '';
+                fileResolution.textContent = '';
             }
         });
     </script>