@jjlmoya/utils-audiovisual 1.18.0 → 1.20.0

package/src/tool/videoMerger/component.astro

@@ -0,0 +1,400 @@
+---
+import type { VideoMergerUI } from './index';
+import './online-video-merger.css';
+
+interface Props {
+  ui: VideoMergerUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="vm-root" id="vm-root" data-ui={JSON.stringify(ui)}>
+  <div class="vm-premium-card">
+
+    <div id="vm-upload-box" class="vm-uploader-box">
+      <input type="file" id="vm-file-input" accept="video/*" multiple class="vm-hidden" />
+      <div class="vm-uploader-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3z"/>
+        </svg>
+      </div>
+      <div class="vm-uploader-text">
+        <h3>{ui.uploadTitle}</h3>
+        <p>{ui.uploadFormats}</p>
+      </div>
+      <span class="vm-privacy-note">{ui.privacyNote}</span>
+    </div>
+
+    <div id="vm-workspace" class="vm-hidden">
+      
+      <div class="vm-list-section">
+        <div class="vm-list-header">
+          <h4>{ui.listTitle}</h4>
+          <button id="vm-add-more" class="vm-btn-main vm-btn-secondary vm-btn-sm" style="flex:none; width:auto; padding: 0.4rem 0.875rem;">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+            <span>{ui.addMoreBtn}</span>
+          </button>
+        </div>
+        
+        <div id="vm-list-container" class="vm-list-container">
+          <div class="vm-empty-state">{ui.emptyList}</div>
+        </div>
+      </div>
+
+      <div class="vm-controls-glass">
+        <h4 class="vm-options-title">{ui.optionsTitle}</h4>
+        
+        <div class="vm-options-grid">
+          <div class="vm-select-group">
+            <label>{ui.optionResolution}</label>
+            <select id="vm-res-select">
+              <option value="1920x1080">1920x1080 (Full HD 16:9)</option>
+              <option value="1280x720">1280x720 (HD 16:9)</option>
+              <option value="3840x2160">3840x2160 (4K UHD 16:9)</option>
+              <option value="640x360">640x360 (nHD 16:9)</option>
+              <option value="1080x1920">1080x1920 (Vertical 9:16)</option>
+            </select>
+          </div>
+          
+          <div class="vm-select-group">
+            <label>{ui.optionFps}</label>
+            <select id="vm-fps-select">
+              <option value="30">30 FPS</option>
+              <option value="24">24 FPS</option>
+              <option value="60">60 FPS</option>
+            </select>
+          </div>
+        </div>
+        
+        <p class="vm-quality-note">{ui.optionsQualityNote}</p>
+        
+        <div id="vm-resolution-warning" class="vm-warning-box vm-hidden">
+          <svg viewBox="0 0 24 24" fill="currentColor" style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
+          <span id="vm-resolution-warning-text"></span>
+        </div>
+      </div>
+
+      <div id="vm-progress-wrapper" class="vm-progress-wrapper vm-hidden" style="margin-top: 1.25rem;">
+        <div class="vm-progress-header">
+          <span id="vm-status-label">{ui.mergingStatus}</span>
+          <span id="vm-progress-percent">0%</span>
+        </div>
+        <div class="vm-progress-bar">
+          <div id="vm-progress-fill" class="vm-progress-fill"></div>
+        </div>
+      </div>
+
+      <div class="vm-actions-row" style="margin-top: 1.5rem;">
+        <button id="vm-merge-btn" class="vm-btn-main vm-btn-primary">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+          <span id="vm-merge-text">{ui.mergeBtn}</span>
+        </button>
+        
+        <a id="vm-download-btn" href="" download="merged_video.webm" class="vm-btn-main vm-btn-primary vm-hidden" style="background-color: var(--vm-success); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z"/></svg>
+          <span>{ui.downloadBtn}</span>
+        </a>
+
+        <button id="vm-reset-btn" class="vm-btn-main vm-btn-secondary" style="flex:none; width:auto;">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8 8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6 6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"/></svg>
+          <span>{ui.resetBtn}</span>
+        </button>
+      </div>
+
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import { VideoMergerEngine, getVideoMetadata, formatTime } from './logic';
+  import type { VideoItem } from './logic';
+
+  function init() {
+    const root = document.getElementById('vm-root');
+    if (!root) return;
+
+    const fileInput = root.querySelector('#vm-file-input') as HTMLInputElement;
+    const uploadBox = root.querySelector('#vm-upload-box') as HTMLElement;
+    const workspace = root.querySelector('#vm-workspace') as HTMLElement;
+    const addMoreBtn = root.querySelector('#vm-add-more') as HTMLElement;
+    const listContainer = root.querySelector('#vm-list-container') as HTMLElement;
+    
+    const resSelect = root.querySelector('#vm-res-select') as HTMLSelectElement;
+    const fpsSelect = root.querySelector('#vm-fps-select') as HTMLSelectElement;
+    
+    const progressWrapper = root.querySelector('#vm-progress-wrapper') as HTMLElement;
+    const statusLabel = root.querySelector('#vm-status-label') as HTMLElement;
+    const progressPercent = root.querySelector('#vm-progress-percent') as HTMLElement;
+    const progressBar = root.querySelector('.vm-progress-bar') as HTMLElement;
+    
+    const mergeBtn = root.querySelector('#vm-merge-btn') as HTMLButtonElement;
+    const downloadBtn = root.querySelector('#vm-download-btn') as HTMLAnchorElement;
+    const resetBtn = root.querySelector('#vm-reset-btn') as HTMLButtonElement;
+    const resolutionWarning = root.querySelector('#vm-resolution-warning') as HTMLElement;
+    const resolutionWarningText = root.querySelector('#vm-resolution-warning-text') as HTMLElement;
+
+    let items: VideoItem[] = [];
+    const engine = new VideoMergerEngine();
+
+    function checkResolutions() {
+      const resParts = resSelect.value.split('x');
+      const width = parseInt(resParts[0] || '1920');
+      const height = parseInt(resParts[1] || '1080');
+
+      let hasMismatch = false;
+      for (const item of items) {
+        if (item.width !== width || item.height !== height) {
+          hasMismatch = true;
+          break;
+        }
+      }
+
+      if (hasMismatch) {
+        resolutionWarning.classList.remove('vm-hidden');
+        resolutionWarningText.textContent = root!.dataset.ui ? JSON.parse(root!.dataset.ui).resolutionWarning : 'Advertencia: Resoluciones distintas';
+      } else {
+        resolutionWarning.classList.add('vm-hidden');
+      }
+    }
+
+    resSelect.onchange = () => {
+      checkResolutions();
+    };
+
+    function renderList() {
+      listContainer.innerHTML = '';
+      if (items.length === 0) {
+        workspace.classList.add('vm-hidden');
+        uploadBox.classList.remove('vm-hidden');
+        return;
+      }
+
+      mergeBtn.disabled = items.length < 2;
+      checkResolutions();
+
+      items.forEach((item, index) => {
+        const card = document.createElement('div');
+        card.className = 'vm-item-card';
+        card.innerHTML = `
+          <span class="vm-item-index">${index + 1}</span>
+          <div class="vm-item-details">
+            <h5 class="vm-item-name">${item.name}</h5>
+            <div class="vm-item-meta">
+              <span>${formatTime(item.duration)}</span>
+              <span>${item.width} × ${item.height}</span>
+            </div>
+          </div>
+          <div class="vm-item-controls">
+            <button class="vm-btn-icon vm-move-up" ${index === 0 ? 'disabled' : ''}>
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
+            </button>
+            <button class="vm-btn-icon vm-move-down" ${index === items.length - 1 ? 'disabled' : ''}>
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
+            </button>
+            <button class="vm-btn-icon vm-danger vm-delete">
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+            </button>
+          </div>
+        `;
+
+        const moveUp = card.querySelector('.vm-move-up') as HTMLElement;
+        const moveDown = card.querySelector('.vm-move-down') as HTMLElement;
+        const delBtn = card.querySelector('.vm-delete') as HTMLElement;
+
+        moveUp.onclick = () => {
+          if (index > 0) {
+            const temp = items[index];
+            const prev = items[index - 1];
+            if (temp && prev) {
+              items[index] = prev;
+              items[index - 1] = temp;
+              renderList();
+            }
+          }
+        };
+
+        moveDown.onclick = () => {
+          if (index < items.length - 1) {
+            const temp = items[index];
+            const next = items[index + 1];
+            if (temp && next) {
+              items[index] = next;
+              items[index + 1] = temp;
+              renderList();
+            }
+          }
+        };
+
+        delBtn.onclick = () => {
+          URL.revokeObjectURL(item.url);
+          items.splice(index, 1);
+          renderList();
+        };
+
+        listContainer.appendChild(card);
+      });
+    }
+
+    async function handleFiles(files: FileList) {
+      uploadBox.classList.add('vm-hidden');
+      workspace.classList.remove('vm-hidden');
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (!file) continue;
+        try {
+          const meta = await getVideoMetadata(file);
+          items.push({
+            id: Math.random().toString(36).substring(2, 9),
+            file,
+            url: URL.createObjectURL(file),
+            name: file.name,
+            duration: meta.duration,
+            width: meta.width,
+            height: meta.height
+          });
+
+          if (items.length === 1) {
+            const value = `${meta.width}x${meta.height}`;
+            const exists = Array.from(resSelect.options).some(opt => opt.value === value);
+            if (!exists) {
+              const opt = document.createElement('option');
+              opt.value = value;
+              opt.textContent = `${meta.width}×${meta.height} (Original)`;
+              resSelect.appendChild(opt);
+            }
+            resSelect.value = value;
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      renderList();
+    }
+
+    uploadBox.onclick = () => fileInput.click();
+    fileInput.onchange = () => {
+      if (fileInput.files) {
+        handleFiles(fileInput.files);
+        fileInput.value = '';
+      }
+    };
+
+    addMoreBtn.onclick = () => fileInput.click();
+
+    root.ondragover = (e) => { e.preventDefault(); uploadBox.classList.add('vm-dragover'); };
+    root.ondragleave = () => uploadBox.classList.remove('vm-dragover');
+    root.ondrop = (e) => {
+      e.preventDefault();
+      uploadBox.classList.remove('vm-dragover');
+      if (e.dataTransfer?.files) handleFiles(e.dataTransfer.files);
+    };
+
+    mergeBtn.onclick = async () => {
+      if (items.length < 2) return;
+
+      const resParts = resSelect.value.split('x');
+      const width = parseInt(resParts[0] || '1920');
+      const height = parseInt(resParts[1] || '1080');
+      const fps = parseInt(fpsSelect.value);
+
+      mergeBtn.disabled = true;
+      resetBtn.disabled = true;
+      addMoreBtn.classList.add('vm-hidden');
+      
+      const controlButtons = listContainer.querySelectorAll('.vm-btn-icon') as NodeListOf<HTMLButtonElement>;
+      controlButtons.forEach(btn => btn.disabled = true);
+
+      progressWrapper.classList.remove('vm-hidden');
+      downloadBtn.classList.add('vm-hidden');
+
+      engine.setItems(items);
+
+      progressBar.innerHTML = '';
+      const numVideos = items.length;
+      const segmentFills: HTMLElement[] = [];
+      for (let k = 0; k < numVideos; k++) {
+        const segment = document.createElement('div');
+        segment.className = 'vm-progress-segment';
+        const fill = document.createElement('div');
+        fill.className = 'vm-progress-segment-fill';
+        segment.appendChild(fill);
+        progressBar.appendChild(segment);
+        segmentFills.push(fill);
+      }
+
+      try {
+        const blob = await engine.merge({ width, height, fps }, (progress, name, index) => {
+          const globalProgress = Math.floor(((index * 100) + progress) / numVideos);
+          progressPercent.textContent = `${globalProgress}%`;
+          
+          for (let k = 0; k < numVideos; k++) {
+            const fill = segmentFills[k];
+            if (fill) {
+              if (k < index) {
+                fill.style.width = '100%';
+              } else if (k === index) {
+                fill.style.width = `${progress}%`;
+              } else {
+                fill.style.width = '0%';
+              }
+            }
+          }
+
+          statusLabel.textContent = `${root.dataset.ui ? JSON.parse(root.dataset.ui).mergingStatus : 'Uniendo...'} (${name})`;
+        });
+
+        const resultUrl = URL.createObjectURL(blob);
+        
+        progressPercent.textContent = '100%';
+        for (let k = 0; k < numVideos; k++) {
+          const fill = segmentFills[k];
+          if (fill) fill.style.width = '100%';
+        }
+        
+        downloadBtn.href = resultUrl;
+        downloadBtn.classList.remove('vm-hidden');
+        mergeBtn.classList.add('vm-hidden');
+      } catch (err) {
+        console.error(err);
+      } finally {
+        resetBtn.disabled = false;
+      }
+    };
+
+    resetBtn.onclick = () => {
+      items.forEach(item => URL.revokeObjectURL(item.url));
+      items = [];
+      
+      const downloadUrl = downloadBtn.href;
+      if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+
+      progressWrapper.classList.add('vm-hidden');
+      progressPercent.textContent = '0%';
+      progressBar.innerHTML = '<div id="vm-progress-fill" class="vm-progress-fill"></div>';
+
+      mergeBtn.disabled = false;
+      mergeBtn.classList.remove('vm-hidden');
+      downloadBtn.classList.add('vm-hidden');
+      addMoreBtn.classList.remove('vm-hidden');
+
+      resSelect.value = '1920x1080';
+      const defaultValues = ['1920x1080', '1280x720', '3840x2160', '640x360', '1080x1920'];
+      for (let i = resSelect.options.length - 1; i >= 0; i--) {
+        const val = resSelect.options[i]?.value;
+        if (val && !defaultValues.includes(val)) {
+          resSelect.remove(i);
+        }
+      }
+      resolutionWarning.classList.add('vm-hidden');
+      
+      fileInput.value = '';
+      renderList();
+    };
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>

package/src/tool/videoMerger/entry.ts

@@ -0,0 +1,51 @@
+import type { AudiovisualToolEntry, ToolLocaleContent } from '../../types';
+
+export interface VideoMergerUI {
+    uploadTitle: string;
+    uploadFormats: string;
+    privacyNote: string;
+    addMoreBtn: string;
+    mergeBtn: string;
+    mergingStatus: string;
+    downloadBtn: string;
+    resetBtn: string;
+    emptyList: string;
+    listTitle: string;
+    optionsTitle: string;
+    optionResolution: string;
+    optionFps: string;
+    optionsQualityNote: string;
+    faqTitle: string;
+    bibliographyTitle: string;
+    resolutionWarning: string;
+    [key: string]: string;
+}
+
+export type VideoMergerLocaleContent = ToolLocaleContent<VideoMergerUI>;
+
+export const videoMerger: AudiovisualToolEntry<VideoMergerUI> = {
+    id: 'online-video-merger',
+    icons: {
+        bg: 'mdi:video-vintage',
+        fg: 'mdi:video-plus',
+    },
+    i18n: {
+        de: async () => (await import('./i18n/de')).content as unknown as VideoMergerLocaleContent,
+        en: async () => (await import('./i18n/en')).content as unknown as VideoMergerLocaleContent,
+        es: async () => (await import('./i18n/es')).content as unknown as VideoMergerLocaleContent,
+        fr: async () => (await import('./i18n/fr')).content as unknown as VideoMergerLocaleContent,
+        id: async () => (await import('./i18n/id')).content as unknown as VideoMergerLocaleContent,
+        it: async () => (await import('./i18n/it')).content as unknown as VideoMergerLocaleContent,
+        ja: async () => (await import('./i18n/ja')).content as unknown as VideoMergerLocaleContent,
+        ko: async () => (await import('./i18n/ko')).content as unknown as VideoMergerLocaleContent,
+        nl: async () => (await import('./i18n/nl')).content as unknown as VideoMergerLocaleContent,
+        pl: async () => (await import('./i18n/pl')).content as unknown as VideoMergerLocaleContent,
+        pt: async () => (await import('./i18n/pt')).content as unknown as VideoMergerLocaleContent,
+        ru: async () => (await import('./i18n/ru')).content as unknown as VideoMergerLocaleContent,
+        sv: async () => (await import('./i18n/sv')).content as unknown as VideoMergerLocaleContent,
+        tr: async () => (await import('./i18n/tr')).content as unknown as VideoMergerLocaleContent,
+        zh: async () => (await import('./i18n/zh')).content as unknown as VideoMergerLocaleContent,
+    },
+};
+
+export { bibliography } from './bibliography';

package/src/tool/videoMerger/i18n/de.ts

@@ -0,0 +1,205 @@
+import { bibliography } from '../bibliography';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { VideoMergerUI, VideoMergerLocaleContent } from '../index';
+
+const slug = 'videos-zusammenfuegen-online';
+const title = 'Videos online zusammenfügen: Mehrere Videos schnell & kostenlos';
+const description = 'Fügen Sie mehrere Videos kostenlos, online und lokal zu einem zusammen. Keine Wasserzeichen, keine Uploads, 100% privat in Ihrem Browser.';
+
+const ui: VideoMergerUI = {
+    uploadTitle: "Laden Sie Ihre Videodateien hoch",
+    uploadFormats: "Ziehen Sie mehrere Videos hierher oder klicken Sie zur Auswahl",
+    privacyNote: "Ihre Videos werden 100% lokal verarbeitet. Nichts wird ins Internet hochgeladen.",
+    addMoreBtn: "Weitere Videos hinzufügen",
+    mergeBtn: "Videos jetzt zusammenfügen",
+    mergingStatus: "Videos werden zusammengefügt...",
+    downloadBtn: "Zusammengefügtes Video herunterladen",
+    resetBtn: "Neu beginnen",
+    emptyList: "Ziehen Sie Videos hierher oder wählen Sie sie aus, um zu beginnen.",
+    listTitle: "Reihenfolge der zusammenzufügenden Videos",
+    optionsTitle: "Ausgabeeinstellungen",
+    optionResolution: "Auflösung",
+    optionFps: "Bilder pro Sekunde (FPS)",
+    optionsQualityNote: "Die endgültige Auflösung wird unter Beibehaltung des ursprünglichen Seitenverhältnisses im Letterbox-Format angepasst, falls die Videos unterschiedliche Abmessungen haben.",
+    faqTitle: "Häufig gestellte Fragen zum Zusammenfügen von Videos",
+    bibliographyTitle: "Bibliografie & Referenzen",
+    resolutionWarning: "Achtung: Einige Videos haben unterschiedliche Auflösungen und werden automatisch angepasst."
+};
+
+const faq: VideoMergerLocaleContent['faq'] = [
+    {
+        question: "Ist es sicher, meine Videos in dieses Tool hochzuladen?",
+        answer: "Ja, es ist absolut sicher. Das Tool arbeitet zu 100% lokal in Ihrem Browser. Ihre Videos werden niemals über das Internet übertragen oder auf einem Server gespeichert.",
+    },
+    {
+        question: "Was passiert, wenn meine Videos unterschiedliche Abmessungen haben?",
+        answer: "Unser Tool skaliert die Videos automatisch auf die gewählte Ausgabeauflösung. Bei nicht exakt übereinstimmenden Proportionen werden schwarze Ränder (Letterboxing) hinzugefügt, um das ursprüngliche Seitenverhältnis zu erhalten.",
+    },
+    {
+        question: "Bleibt der Ton der Videos beim Zusammenfügen erhalten?",
+        answer: "Ja. Die Tonspuren jedes Videos werden erfasst und sequenziell in perfekter Synchronisation mit jedem Bildsegment gemischt.",
+    },
+];
+
+const howTo: VideoMergerLocaleContent['howTo'] = [
+    {
+        name: "Videos auswählen oder ziehen",
+        text: "Laden Sie alle Videodateien, die Sie zusammenfügen möchten, direkt von Ihrem Computer oder Mobilgerät hoch.",
+    },
+    {
+        name: "Reihenfolge festlegen",
+        text: "Ordnen Sie die hochgeladenen Videos mithilfe der Auf- und Ab-Schaltflächen in der Liste an, um die Wiedergabereihenfolge zu bestimmen.",
+    },
+    {
+        name: "Optionen anpassen",
+        text: "Wählen Sie die Ausgabeauflösung und die Bilder pro Sekunde (FPS) des zusammengefügten Videos.",
+    },
+    {
+        name: "Zusammenfügen und exportieren",
+        text: "Drücken Sie die Schaltfläche 'Zusammenfügen'. Warten Sie, bis die Echtzeitverarbeitung abgeschlossen ist, und laden Sie die resultierende Datei herunter.",
+    },
+];
+
+const seo: VideoMergerLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: '100% lokales professionelles Zusammenfügen von Videos',
+        items: [
+            'Echtzeitverarbeitung direkt in Ihrem Browser',
+            'Unterstützt mehrere Videos unterschiedlicher Größe und Formate (MP4, WEBM, MOV)',
+            'Wählbare Ausgabeauflösung (720p, 1080p, 2K, 4K)',
+            'Audiospuren perfekt sequenziell kombiniert'
+        ]
+    },
+    { type: 'title', text: 'Videos online kostenlos zusammenfügen: Grenzenlose Einfachheit und Privatsphäre', level: 2 },
+    { type: 'paragraph', html: 'Fragen Sie sich, <strong>wie man zwei Videos zu einem zusammenfügt</strong>, ohne Komplikationen? Sie müssen keine schweren Programme oder kostenpflichtige Anwendungen mehr herunterladen. Unser Tool zum <strong>kostenlosen Online-Zusammenfügen von Videos</strong> ermöglicht es Ihnen, in Sekundenschnelle alle benötigten Clips zu verbinden. Da es zu 100% lokal funktioniert, müssen Sie Ihre Dateien auf keinen Server hochladen, was absolute Privatsphäre garantiert und es Ihnen ermöglicht, <strong>große Videos ohne Wartezeiten beim Hochladen zusammenzufügen</strong>.' },
+    
+    { type: 'title', text: 'Videos ohne Wasserzeichen verbinden', level: 3 },
+    { type: 'paragraph', html: 'Einer der größten Nachteile anderer Anwendungen ist, dass sie Ihre Inhalte ruinieren. Mit uns können Sie <strong>Videos online ohne Wasserzeichen verbinden</strong>. Die heruntergeladene Datei wird genau Ihre Kreation sein - sauber, professionell und bereit zum Teilen auf YouTube, Instagram, TikTok oder für den persönlichen Gebrauch.' },
+
+    { type: 'stats', items: [
+        { value: '100%', label: 'Privat und Lokal', icon: 'mdi:shield-check' },
+        { value: '0MB', label: 'Kein Upload', icon: 'mdi:upload-off' },
+        { value: '4K', label: 'Maximale Auflösung', icon: 'mdi:video-high-definition' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Häufige Anwendungsfälle zum Zusammenfügen von Videos', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Social Media',
+            description: 'Schnelles Zusammenfügen von Stories, TikToks oder Reels',
+            icon: 'mdi:instagram',
+            points: [
+                'Verbinden Sie kleine, mit dem Handy aufgenommene Clips',
+                'Bereiten Sie sequenzielle Inhalte für Instagram oder YouTube vor',
+                'Zusammenfügen ohne störende Wasserzeichen'
+            ]
+        },
+        {
+            title: 'Präsentationen',
+            description: 'Verbinden Sie Einführungen und Demo-Aufnahmen in einer Datei',
+            icon: 'mdi:presentation',
+            points: [
+                'Fügen Sie ein animiertes Intro mit dem Hauptteil zusammen',
+                'Verbinden Sie kurze Software-Demos',
+                'Sauberer Export im Standard-MP4/WEBM-Format'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Familienkompilationen',
+            description: 'Fügen Sie mehrere Videos von Urlauben oder Feiern zusammen',
+            icon: 'mdi:home-heart',
+            points: [
+                'Erstellen Sie ein einzelnes Video mit allen Party-Momenten',
+                'Gruppieren Sie Reiseerinnerungen chronologisch',
+                'Einfach zu teilen als eine einzige Datei'
+            ]
+        },
+        {
+            title: 'Lernvideos',
+            description: 'Verbinden Sie kurze Trainingskapitel oder Lektionen',
+            icon: 'mdi:school',
+            points: [
+                'Gruppieren Sie kleine, unabhängige Tutorials',
+                'Fügen Sie Ihren Lektionen einen Schlussclip hinzu',
+                'Strukturieren Sie Ihren Kurs professionell'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Die beste App zum Zusammenfügen von Videos im Browser', level: 2 },
+    { type: 'paragraph', html: 'Dies ist nicht nur eine weitere Webseite; es ist eine echte <strong>App zum Zusammenfügen von Videos</strong>, die dank moderner HTML5-Video-APIs direkt in Ihrem Browser arbeitet. Sie können <strong>MP4-Videos zusammenfügen</strong>, WEBM und mehr, Auflösungen mischen (unser System wendet automatisch Letterboxing an, wenn die Abmessungen variieren) und die Bilder pro Sekunde (FPS) Ihres finalen Exports wählen.' },
+
+    { type: 'title', text: 'Vergleich der Zusammenfügungsansätze', level: 3 },
+    { type: 'table', headers: ['Funktionen', 'Unser lokales Tool', 'Klassische Online-Konverter', 'Professionelle Editoren'], rows: [
+        ['Privatsphäre', 'Vollständig (auf Ihrem Gerät)', 'Gering (Dateien müssen hochgeladen werden)', 'Vollständig (installiert)'],
+        ['Netzwerkverbrauch', 'Null (kein Upload)', 'Sehr hoch (Up- und Download)', 'Null'],
+        ['Wasserzeichen', 'NEIN (100% sauber)', 'Ja (in kostenlosen Versionen)', 'NEIN (bei gekaufter Lizenz)'],
+        ['Preis', '100% Kostenlos', 'Kostenlos mit Limits oder Abo', 'Meist teuer'],
+        ['Lernkurve', 'Sehr flach (Ziehen, ordnen, zusammenfügen)', 'Flach', 'Sehr steil (erfordert Training)']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Garantierte Privatsphäre: Keine Datei verlässt Ihr Gerät',
+            con: 'Die Geschwindigkeit beim Zusammenfügen großer Videos hängt vom RAM und Prozessor Ihres Geräts ab'
+        },
+        {
+            pro: 'Professionelle Ergebnisse: 100% kostenlos, keine Registrierung, keine Wasserzeichen',
+            con: 'Beim Verbinden von Videos mit unterschiedlichen Abmessungen werden schwarze Ränder (Letterboxing) angewendet'
+        },
+        {
+            pro: 'Vielseitigkeit: Schneller Export mit effizienter Kodierung für Web und Social Media',
+            con: 'Erlaubt keine komplexen 3D-Übergänge oder kinoreife visuelle Effekte zwischen Clips'
+        }
+    ], title: 'Vorteile und Überlegungen' },
+
+    { type: 'title', text: 'Beginnen Sie noch heute mit dem Zusammenfügen', level: 2 },
+    { type: 'paragraph', html: 'Es gibt keine Ausreden mehr für hunderte unorganisierte Videofragmente. Laden Sie Ihre Dateien hoch, platzieren Sie sie in der gewünschten Reihenfolge und drücken Sie die Taste. Entdecken Sie den schnellsten, sichersten und privatsten Weg, <strong>Videos online zusammenzufügen</strong>.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'de',
+};
+
+export const content: VideoMergerLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};