Video-Bereitstellung für ForensicPathways Knowledgebase
Videos müssen manuell in diesem Verzeichnis bereitgestellt werden, da sie aufgrund unterschiedlicher Lizenzierung nicht Bestandteil des Open-Source-Git-Repositorys sind.
🎥 Video-Quelle und Lizenzierung
Video-Quelle: https://cloud.cc24.dev/f/47971 (Interner Nextcloud-Share)
Kontakt bei Fragen: mstoeck3@hs-mittweida.de
Lizenzhinweise
- Videos können proprietäre Lizenzen haben
- Nicht für öffentliche Redistribution geeignet
- Nur für den internen Gebrauch in ForensicPathways
- Urheberrechte beachten bei eigenen Video-Beiträgen
📁 Empfohlene Verzeichnisstruktur
public/videos/
├── tools/ # Tool-spezifische Tutorials
│ ├── autopsy/
│ │ ├── autopsy-installation.mp4
│ │ ├── autopsy-basics.mp4
│ │ └── autopsy-advanced-analysis.webm
│ ├── volatility/
│ │ ├── volatility-setup.mp4
│ │ ├── volatility-pslist-demo.mp4
│ │ └── volatility-malfind-tutorial.webm
│ └── yara/
│ ├── yara-rules-basics.mp4
│ └── yara-advanced-hunting.mp4
├── methods/ # Methodologie-Videos
│ ├── timeline-analysis/
│ │ ├── timeline-fundamentals.mp4
│ │ └── timeline-correlation.webm
│ ├── disk-imaging/
│ │ ├── imaging-best-practices.mp4
│ │ └── imaging-verification.mp4
│ └── incident-response/
│ ├── ir-methodology.mp4
│ └── ir-documentation.webm
├── concepts/ # Konzeptuelle Erklärungen
│ ├── forensics-fundamentals/
│ │ ├── hash-functions-explained.mp4
│ │ ├── chain-of-custody.mp4
│ │ └── evidence-handling.webm
│ └── technical-concepts/
│ ├── regex-patterns.mp4
│ └── file-systems.webm
└── shared/ # Übergreifende Inhalte
├── nist-methodology.mp4
├── legal-considerations.webm
└── best-practices-overview.mp4
🦊 Firefox-Kompatibilität (KRITISCH)
Wichtiger Hinweis
Videos müssen in Firefox-kompatiblen Formaten bereitgestellt werden, da das System automatische Firefox-Unterstützung implementiert. Nicht-kompatible Formate führen zu Fehlern!
Unterstützte Formate
✅ Empfohlene Formate (höchste Kompatibilität)
MP4 (H.264/AVC + AAC):
# Konvertierung mit ffmpeg
ffmpeg -i input.mov \
-c:v libx264 \
-c:a aac \
-profile:v baseline \
-level 3.0 \
-movflags +faststart \
output.mp4
WebM (VP8/VP9 + Vorbis/Opus):
# VP9 für beste Qualität
ffmpeg -i input.mov \
-c:v libvpx-vp9 \
-c:a libopus \
-b:v 1M \
-b:a 128k \
output.webm
# VP8 für breitere Kompatibilität
ffmpeg -i input.mov \
-c:v libvpx \
-c:a libvorbis \
-b:v 1M \
-b:a 128k \
output.webm
⚠️ Fallback-Format
OGG Theora (für ältere Firefox-Versionen):
ffmpeg -i input.mov \
-c:v libtheora \
-c:a libvorbis \
-b:v 1M \
-b:a 128k \
output.ogv
❌ Nicht unterstützte Formate in Firefox
- H.265/HEVC (.mp4, .mov) - Wird nicht dekodiert
- AV1 (.mp4, .webm) - Eingeschränkte Unterstützung
- Proprietäre Codecs (.wmv, .avi mit proprietären Codecs)
- Apple-spezifische Formate (.mov mit ProRes, .m4v)
Multi-Format-Bereitstellung
Für maximale Kompatibilität mehrere Formate bereitstellen:
<video title="Autopsy Installation Tutorial" controls>
<source src="/videos/tools/autopsy/installation.mp4" type="video/mp4">
<source src="/videos/tools/autopsy/installation.webm" type="video/webm">
<source src="/videos/tools/autopsy/installation.ogv" type="video/ogg">
<p>Ihr Browser unterstützt das Video-Element nicht.</p>
</video>
🔧 Video-Konvertierung und -Optimierung
Qualitätsrichtlinien
Auflösung und Bitrate
720p (empfohlen für Tutorials):
ffmpeg -i input.mov \
-vf scale=1280:720 \
-c:v libx264 \
-b:v 2M \
-c:a aac \
-b:a 128k \
output.mp4
1080p (für detaillierte Demonstrationen):
ffmpeg -i input.mov \
-vf scale=1920:1080 \
-c:v libx264 \
-b:v 4M \
-c:a aac \
-b:a 128k \
output.mp4
480p (mobile-optimiert):
ffmpeg -i input.mov \
-vf scale=854:480 \
-c:v libx264 \
-b:v 1M \
-c:a aac \
-b:a 96k \
output.mp4
Optimierung für Web-Streaming
Fast Start für progressive Download
# Metadata an Dateianfang verschieben
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4
Keyframe-Intervall optimieren
# Keyframes alle 2 Sekunden für bessere Suche
ffmpeg -i input.mov \
-c:v libx264 \
-g 60 \
-keyint_min 60 \
-sc_threshold 0 \
output.mp4
Batch-Konvertierung
Alle Videos in einem Verzeichnis konvertieren:
#!/bin/bash
# convert-all.sh
for file in *.mov *.avi *.mkv; do
if [ -f "$file" ]; then
name=$(basename "$file" | cut -d. -f1)
# MP4 erstellen
ffmpeg -i "$file" \
-c:v libx264 \
-c:a aac \
-b:v 2M \
-b:a 128k \
-movflags +faststart \
"${name}.mp4"
# WebM erstellen
ffmpeg -i "$file" \
-c:v libvpx-vp9 \
-c:a libopus \
-b:v 1.5M \
-b:a 128k \
"${name}.webm"
fi
done
📊 Dateigröße und Performance
Größenrichtlinien
Streaming-optimiert:
- 720p: 5-15 MB/Minute
- 1080p: 20-40 MB/Minute
- 480p: 2-8 MB/Minute
Maximale Dateigröße:
- Tutorial-Videos: < 100 MB
- Kurze Demos: < 50 MB
- Konzept-Erklärungen: < 30 MB
Kompressionseinstellungen
Ausgewogene Qualität/Größe:
ffmpeg -i input.mov \
-c:v libx264 \
-preset medium \
-crf 23 \
-c:a aac \
-b:a 128k \
output.mp4
Hohe Kompression (kleinere Dateien):
ffmpeg -i input.mov \
-c:v libx264 \
-preset slow \
-crf 28 \
-c:a aac \
-b:a 96k \
output.mp4
🎬 Video-Thumbnail-Generierung
Automatische Thumbnail-Erstellung:
# Thumbnail nach 10 Sekunden
ffmpeg -i input.mp4 -ss 00:00:10 -vframes 1 -q:v 2 thumbnail.jpg
# Mehrere Thumbnails für Auswahl
ffmpeg -i input.mp4 -vf fps=1/30 thumb_%03d.jpg
Thumbnails speichern in:
public/images/video-thumbnails/
├── autopsy-installation-thumb.jpg
├── volatility-basics-thumb.jpg
└── timeline-analysis-thumb.jpg
🔍 Qualitätskontrolle
Pre-Upload-Checkliste
✅ Format-Kompatibilität:
- MP4 mit H.264/AVC Video-Codec
- AAC Audio-Codec
- Fast Start aktiviert (
movflags +faststart) - Keyframe-Intervall ≤ 2 Sekunden
✅ Firefox-Test:
- Video lädt in Firefox ohne Fehler
- Audio synchron mit Video
- Controls funktionieren
- Seeking funktioniert flüssig
✅ Technische Qualität:
- Auflösung angemessen (720p+ für GUI-Demos)
- Audio klar und verständlich
- Keine Kompressionsartefakte
- Dateigröße < 100 MB
✅ Inhaltliche Qualität:
- Beschreibender Dateiname
- Angemessene Länge (< 10 Minuten für Tutorials)
- Klare Demonstration der Funktionalität
- Sichtbare UI-Elemente
Automated Testing
#!/bin/bash
# video-check.sh - Basis-Validierung
for video in public/videos/**/*.mp4; do
echo "Checking: $video"
# Format prüfen
format=$(ffprobe -v quiet -select_streams v:0 -show_entries stream=codec_name -of csv=p=0 "$video")
if [ "$format" != "h264" ]; then
echo "❌ Wrong codec: $format (should be h264)"
fi
# Dateigröße prüfen
size=$(stat -c%s "$video")
if [ $size -gt 104857600 ]; then # 100MB
echo "⚠️ Large file: $(($size / 1048576))MB"
fi
echo "✅ $video validated"
done
🚨 Troubleshooting
Häufige Firefox-Probleme
Problem: Video lädt nicht
Lösung:
1. Codec überprüfen: ffprobe -v quiet -show_format -show_streams video.mp4
2. Fallback-Format hinzufügen
3. Fast Start aktivieren
Problem: Audio/Video out of sync
Lösung:
ffmpeg -i input.mp4 -c:v copy -c:a aac -avoid_negative_ts make_zero output.mp4
Problem: Seeking funktioniert nicht
Lösung:
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4
Performance-Probleme
Problem: Lange Ladezeiten
Lösungsansätze:
1. Bitrate reduzieren
2. Auflösung verringern
3. Keyframe-Intervall optimieren
4. Progressive Download aktivieren
Problem: Hohe Bandbreiten-Nutzung
Lösungsansätze:
1. Adaptive Streaming implementieren
2. Multiple Qualitätsstufen bereitstellen
3. Preload="metadata" verwenden
📋 Deployment-Checkliste
Nach Video-Upload:
-
✅ Dateistruktur prüfen
ls -la public/videos/tools/autopsy/ -
✅ Permissions setzen
chmod 644 public/videos/**/*.mp4 -
✅ Artikel-Verlinkung testen
- Video-Tags in Markdown funktionieren
- Responsive Container werden generiert
- Thumbnails laden korrekt
-
✅ Browser-Kompatibilität
- Firefox: Codec-Support prüfen
- Chrome: Performance testen
- Safari: Fallback-Formate testen
- Mobile: Touch-Controls funktionieren
-
✅ Build-System
npm run build # Keine Video-bezogenen Fehler in Console
Bei Problemen kontaktieren Sie mstoeck3@hs-mittweida.de mit:
- Browser und Version
- Video-Dateiname und -pfad
- Fehlermeldungen aus Browser-Console
- Screenshot des Problems