forensic-pathways/public/videos/README.md

# 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):**
```bash
# 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):**
```bash
# 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):**
```bash
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:

```html
<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):**
```bash
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):**
```bash
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):**
```bash
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
```bash
# Metadata an Dateianfang verschieben
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4
```

#### Keyframe-Intervall optimieren
```bash
# 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:**
```bash
#!/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:**
```bash
ffmpeg -i input.mov \
  -c:v libx264 \
  -preset medium \
  -crf 23 \
  -c:a aac \
  -b:a 128k \
  output.mp4
```

**Hohe Kompression (kleinere Dateien):**
```bash
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:

```bash
# 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

```bash
#!/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:**

1. **✅ Dateistruktur prüfen**
   ```bash
   ls -la public/videos/tools/autopsy/
   ```

2. **✅ Permissions setzen**
   ```bash
   chmod 644 public/videos/**/*.mp4
   ```

3. **✅ Artikel-Verlinkung testen**
   - Video-Tags in Markdown funktionieren
   - Responsive Container werden generiert
   - Thumbnails laden korrekt

4. **✅ Browser-Kompatibilität**
   - Firefox: Codec-Support prüfen
   - Chrome: Performance testen
   - Safari: Fallback-Formate testen
   - Mobile: Touch-Controls funktionieren

5. **✅ Build-System**
   ```bash
   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