update readme files
This commit is contained in:
		
							parent
							
								
									75410e2b84
								
							
						
					
					
						commit
						e93f394263
					
				
							
								
								
									
										16
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										16
									
								
								README.md
									
									
									
									
									
								
							@ -250,10 +250,26 @@ Ihr Artikel-Inhalt hier...
 | 
			
		||||
2. Installer ausführen
 | 
			
		||||
3. Einstellungen konfigurieren
 | 
			
		||||
 | 
			
		||||
## Video-Demonstration
 | 
			
		||||
<video src="/videos/setup-tutorial.mp4" title="Setup-Tutorial" controls></video>
 | 
			
		||||
 | 
			
		||||
## Häufige Probleme
 | 
			
		||||
Lösungen für typische Probleme...
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### Video-Integration
 | 
			
		||||
 | 
			
		||||
Knowledgebase-Artikel unterstützen eingebettete Videos für praktische Demonstrationen:
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<video src="/videos/demo.mp4" title="Tool-Demonstration" controls></video>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
**Wichtige Hinweise**:
 | 
			
		||||
- Videos müssen manuell in `public/videos/` bereitgestellt werden (nicht im Git-Repository enthalten)
 | 
			
		||||
- Firefox-kompatible Formate verwenden (MP4 H.264, WebM VP9)
 | 
			
		||||
- Detaillierte Video-Dokumentation: siehe `src/content/knowledgebase/README.md`
 | 
			
		||||
 | 
			
		||||
### Artikel-Struktur-Richtlinien
 | 
			
		||||
 | 
			
		||||
**Erforderliche Felder**:
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,405 @@
 | 
			
		||||
# Manuell hinzufügen
 | 
			
		||||
# Video-Bereitstellung für ForensicPathways Knowledgebase
 | 
			
		||||
 | 
			
		||||
Hier müssen Videos, die eingebettet werden sollen, manuell abgespeichert werden.
 | 
			
		||||
Da diese anders lizensiert sein können, sind sie nicht Bestandteil des Open-Source-Repositorys.
 | 
			
		||||
Bei Bedarf bitte Kontakt aufnehmen mit mstoeck3@hs-mittweida.de.
 | 
			
		||||
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
 | 
			
		||||
@ -121,9 +121,9 @@ vol -f memory.dmp windows.info
 | 
			
		||||
vol -f memory.dmp windows.pslist
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Video-Einbindung
 | 
			
		||||
## Video-Demonstration
 | 
			
		||||
 | 
			
		||||
<video src="/path/to/video.mp4" title="Volatility Demo" controls></video>
 | 
			
		||||
<video src="/videos/volatility-basics.mp4" title="Volatility Grundlagen Tutorial" controls preload="metadata"></video>
 | 
			
		||||
 | 
			
		||||
## Weiterführende Links
 | 
			
		||||
 | 
			
		||||
@ -143,20 +143,181 @@ vol -f memory.dmp windows.pslist
 | 
			
		||||
 | 
			
		||||
### Video-Einbindung
 | 
			
		||||
 | 
			
		||||
Videos können direkt in Markdown eingebettet werden:
 | 
			
		||||
Videos können direkt in Markdown eingebettet werden und werden automatisch mit responsiven Containern erweitert:
 | 
			
		||||
 | 
			
		||||
#### Basis-Video-Einbindung
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<video src="/pfad/zum/video.mp4" title="Beschreibung" controls></video>
 | 
			
		||||
<video src="/videos/demo.mp4" title="Tool-Demonstration" controls></video>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
Unterstützte Attribute:
 | 
			
		||||
- `src`: Pfad zur Videodatei
 | 
			
		||||
- `title`: Titel für Metadaten
 | 
			
		||||
- `controls`: Zeigt Player-Steuerung
 | 
			
		||||
- `autoplay`: Automatisches Abspielen
 | 
			
		||||
- `muted`: Stummgeschaltet
 | 
			
		||||
#### Vollständige Video-Konfiguration
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<video 
 | 
			
		||||
  src="/videos/advanced-tutorial.mp4" 
 | 
			
		||||
  title="Erweiterte Analysefunktionen"
 | 
			
		||||
  controls
 | 
			
		||||
  preload="metadata"
 | 
			
		||||
  width="720"
 | 
			
		||||
  height="405"
 | 
			
		||||
  muted
 | 
			
		||||
  poster="/images/video-thumbnail.jpg"
 | 
			
		||||
>
 | 
			
		||||
  <p>Ihr Browser unterstützt das Video-Element nicht.</p>
 | 
			
		||||
</video>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
#### Unterstützte Video-Attribute
 | 
			
		||||
 | 
			
		||||
**Basis-Attribute:**
 | 
			
		||||
- `src`: **Erforderlich** - Pfad zur Videodatei (relativ zu `/public/`)
 | 
			
		||||
- `title`: **Empfohlen** - Beschreibung für Metadaten und Accessibility
 | 
			
		||||
- `controls`: Zeigt Player-Steuerung (Standard-Empfehlung)
 | 
			
		||||
 | 
			
		||||
**Erweiterte Attribute:**
 | 
			
		||||
- `autoplay`: Automatisches Abspielen (nicht empfohlen für UX)
 | 
			
		||||
- `muted`: Stummgeschaltet (erforderlich für Autoplay in den meisten Browsern)
 | 
			
		||||
- `loop`: Endlosschleife
 | 
			
		||||
- `preload`: "none", "metadata", "auto"
 | 
			
		||||
- `preload`: `"none"` | `"metadata"` | `"auto"` (Standard: `"metadata"`)
 | 
			
		||||
- `poster`: Vorschaubild-URL
 | 
			
		||||
- `width`/`height`: Feste Dimensionen (Optional, responsive Container anpasst sich automatisch)
 | 
			
		||||
 | 
			
		||||
**Accessibility-Attribute:**
 | 
			
		||||
- `aria-label`: Alternative Beschreibung
 | 
			
		||||
- `aria-describedby`: ID eines Elements mit detaillierter Beschreibung
 | 
			
		||||
 | 
			
		||||
#### iframe-Einbindung (YouTube, Vimeo, etc.)
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<iframe 
 | 
			
		||||
  src="https://www.youtube.com/embed/VIDEO_ID" 
 | 
			
		||||
  title="YouTube-Tutorial: Forensic Analysis mit Tool XYZ"
 | 
			
		||||
  width="560" 
 | 
			
		||||
  height="315" 
 | 
			
		||||
  frameborder="0" 
 | 
			
		||||
  allowfullscreen
 | 
			
		||||
></iframe>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
**iframe-Attribute:**
 | 
			
		||||
- `src`: **Erforderlich** - Embed-URL des Video-Dienstes
 | 
			
		||||
- `title`: **Erforderlich** - Beschreibung für Accessibility
 | 
			
		||||
- `width`/`height`: Empfohlene Dimensionen (werden responsive angepasst)
 | 
			
		||||
- `frameborder`: Auf `"0"` setzen für modernen Look
 | 
			
		||||
- `allowfullscreen`: Vollbild-Modus erlauben
 | 
			
		||||
- `loading`: `"lazy"` für Performance-Optimierung
 | 
			
		||||
 | 
			
		||||
### Automatische Video-Verarbeitung
 | 
			
		||||
 | 
			
		||||
Das System erweitert Video-Tags automatisch:
 | 
			
		||||
 | 
			
		||||
**Input:**
 | 
			
		||||
```html
 | 
			
		||||
<video src="/videos/demo.mp4" title="Demo" controls></video>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
**Output (automatisch generiert):**
 | 
			
		||||
```html
 | 
			
		||||
<div class="video-container">
 | 
			
		||||
  <video 
 | 
			
		||||
    src="/videos/demo.mp4" 
 | 
			
		||||
    title="Demo" 
 | 
			
		||||
    controls 
 | 
			
		||||
    preload="metadata"
 | 
			
		||||
    data-video-title="Demo"
 | 
			
		||||
  >
 | 
			
		||||
    <p>Your browser does not support the video element.</p>
 | 
			
		||||
  </video>
 | 
			
		||||
  <div class="video-metadata">
 | 
			
		||||
    <div class="video-title">Demo</div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### Firefox-Kompatibilität
 | 
			
		||||
 | 
			
		||||
**Wichtiger Hinweis:** Videos müssen in Firefox-kompatiblen Formaten bereitgestellt werden:
 | 
			
		||||
 | 
			
		||||
#### Empfohlene Formate
 | 
			
		||||
 | 
			
		||||
**Primäre Formate (höchste Kompatibilität):**
 | 
			
		||||
- **MP4 (H.264/AVC)**: `.mp4` - Beste Kompatibilität across Browser
 | 
			
		||||
- **WebM (VP8/VP9)**: `.webm` - Moderne Browser, gute Kompression
 | 
			
		||||
 | 
			
		||||
**Sekundäre Formate:**
 | 
			
		||||
- **OGG Theora**: `.ogv` - Fallback für ältere Firefox-Versionen
 | 
			
		||||
 | 
			
		||||
#### Format-Konvertierung
 | 
			
		||||
 | 
			
		||||
```bash
 | 
			
		||||
# Mit ffmpeg zu Firefox-kompatiblem MP4 konvertieren
 | 
			
		||||
ffmpeg -i input.mov -c:v libx264 -c:a aac -movflags +faststart output.mp4
 | 
			
		||||
 | 
			
		||||
# Mit ffmpeg zu WebM konvertieren
 | 
			
		||||
ffmpeg -i input.mov -c:v libvpx-vp9 -c:a libvorbis output.webm
 | 
			
		||||
 | 
			
		||||
# Multi-Format-Bereitstellung
 | 
			
		||||
<video title="Demo" controls>
 | 
			
		||||
  <source src="/videos/demo.mp4" type="video/mp4">
 | 
			
		||||
  <source src="/videos/demo.webm" type="video/webm">
 | 
			
		||||
  <p>Ihr Browser unterstützt das Video-Element nicht.</p>
 | 
			
		||||
</video>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
#### Firefox-spezifische Probleme
 | 
			
		||||
 | 
			
		||||
Das System erkennt automatisch Firefox und implementiert Error-Recovery:
 | 
			
		||||
 | 
			
		||||
- **Automatische Fehlererkennung** für nicht unterstützte Formate
 | 
			
		||||
- **Fallback-Mechanismen** bei Codec-Problemen
 | 
			
		||||
- **Erweiterte Logging** für Debugging
 | 
			
		||||
 | 
			
		||||
**Bekannte Firefox-Probleme:**
 | 
			
		||||
- H.265/HEVC nicht unterstützt
 | 
			
		||||
- Proprietäre Codecs teilweise eingeschränkt
 | 
			
		||||
- MIME-Type-Sensitivität höher als bei Chrome
 | 
			
		||||
 | 
			
		||||
### Video-Datei-Management
 | 
			
		||||
 | 
			
		||||
#### Dateistruktur
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
public/
 | 
			
		||||
├── videos/
 | 
			
		||||
│   ├── tools/
 | 
			
		||||
│   │   ├── autopsy-basics.mp4
 | 
			
		||||
│   │   ├── volatility-tutorial.webm
 | 
			
		||||
│   │   └── yara-rules-demo.mp4
 | 
			
		||||
│   ├── methods/
 | 
			
		||||
│   │   ├── timeline-analysis.mp4
 | 
			
		||||
│   │   └── disk-imaging.mp4
 | 
			
		||||
│   └── concepts/
 | 
			
		||||
│       ├── hash-functions.mp4
 | 
			
		||||
│       └── chain-custody.mp4
 | 
			
		||||
└── images/
 | 
			
		||||
    └── video-thumbnails/
 | 
			
		||||
        ├── autopsy-thumb.jpg
 | 
			
		||||
        └── volatility-thumb.jpg
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
#### Dateigröße-Empfehlungen
 | 
			
		||||
 | 
			
		||||
- **Streaming-Qualität**: 5-15 MB/Minute (720p)
 | 
			
		||||
- **High-Quality Tutorials**: 20-40 MB/Minute (1080p)
 | 
			
		||||
- **Mobile-Optimiert**: 2-8 MB/Minute (480p)
 | 
			
		||||
 | 
			
		||||
#### Konventionen
 | 
			
		||||
 | 
			
		||||
**Dateinamen:**
 | 
			
		||||
- Lowercase mit Bindestrichen: `tool-autopsy-installation.mp4`
 | 
			
		||||
- Präfix nach Kategorie: `tool-`, `method-`, `concept-`
 | 
			
		||||
- Beschreibender Suffix: `-basics`, `-advanced`, `-troubleshooting`
 | 
			
		||||
 | 
			
		||||
**Video-Titel:**
 | 
			
		||||
- Beschreibend und suchfreundlich
 | 
			
		||||
- Tool/Methode im Titel erwähnen
 | 
			
		||||
- Skill-Level angeben: "Grundlagen", "Erweitert", "Expertenlevel"
 | 
			
		||||
 | 
			
		||||
### Code-Blöcke
 | 
			
		||||
 | 
			
		||||
@ -173,10 +334,10 @@ import volatility.registry as registry
 | 
			
		||||
 | 
			
		||||
### Tabellen
 | 
			
		||||
 | 
			
		||||
| Plugin | Beschreibung | Beispiel |
 | 
			
		||||
|--------|--------------|----------|
 | 
			
		||||
| pslist | Prozesse auflisten | `vol -f dump.raw windows.pslist` |
 | 
			
		||||
| malfind | Malware finden | `vol -f dump.raw windows.malfind` |
 | 
			
		||||
| Plugin | Beschreibung | Video-Tutorial |
 | 
			
		||||
|--------|--------------|----------------|
 | 
			
		||||
| pslist | Prozesse auflisten | [Tutorial ansehen](/videos/pslist-demo.mp4) |
 | 
			
		||||
| malfind | Malware finden | [Demo](/videos/malfind-basics.mp4) |
 | 
			
		||||
 | 
			
		||||
## Artikel-Typen
 | 
			
		||||
 | 
			
		||||
@ -274,13 +435,20 @@ Das System validiert automatisch:
 | 
			
		||||
- Broken Links werden geloggt (development)
 | 
			
		||||
- Dateinamen-Präfixe helfen bei der Organisation und Verknüpfung
 | 
			
		||||
 | 
			
		||||
### Video-Validierung
 | 
			
		||||
 | 
			
		||||
- Dateipfade auf Existenz geprüft (development)
 | 
			
		||||
- Format-Kompatibilität gewarnt
 | 
			
		||||
- Firefox-spezifische Warnings bei problematischen Formaten
 | 
			
		||||
 | 
			
		||||
## Deployment
 | 
			
		||||
 | 
			
		||||
1. Artikel von Nextcloud-Share herunterladen: https://cloud.cc24.dev/f/47971
 | 
			
		||||
2. Artikel in `src/content/knowledgebase/` ablegen (flache Struktur mit Präfixen)
 | 
			
		||||
3. Frontmatter nach Schema überprüfen/anpassen
 | 
			
		||||
4. Build-Prozess validiert automatisch
 | 
			
		||||
5. Artikel erscheint in Knowledgebase-Übersicht
 | 
			
		||||
2. Videos manuell in `public/videos/` bereitstellen (siehe `public/videos/README.md`)
 | 
			
		||||
3. Artikel in `src/content/knowledgebase/` ablegen (flache Struktur mit Präfixen)
 | 
			
		||||
4. Frontmatter nach Schema überprüfen/anpassen
 | 
			
		||||
5. Build-Prozess validiert automatisch
 | 
			
		||||
6. Artikel erscheint in Knowledgebase-Übersicht
 | 
			
		||||
 | 
			
		||||
### Troubleshooting
 | 
			
		||||
 | 
			
		||||
@ -295,9 +463,16 @@ Das System validiert automatisch:
 | 
			
		||||
- Groß-/Kleinschreibung beachten
 | 
			
		||||
 | 
			
		||||
**Video lädt nicht:**
 | 
			
		||||
- Pfad korrekt?
 | 
			
		||||
- Datei im `public/` Ordner?
 | 
			
		||||
- Pfad korrekt? (beginnt mit `/videos/`)
 | 
			
		||||
- Datei im `public/videos/` Ordner?
 | 
			
		||||
- Unterstütztes Format? (mp4, webm, ogg)
 | 
			
		||||
- Firefox-kompatibel? (H.264/AVC für MP4)
 | 
			
		||||
 | 
			
		||||
**Firefox-Video-Probleme:**
 | 
			
		||||
- H.265/HEVC-Codecs vermeiden
 | 
			
		||||
- Multiple `<source>`-Tags für Fallbacks nutzen
 | 
			
		||||
- Browser-Console auf Codec-Fehler prüfen
 | 
			
		||||
- MIME-Types korrekt gesetzt?
 | 
			
		||||
 | 
			
		||||
## Beispiel-Ordnerstruktur
 | 
			
		||||
 | 
			
		||||
@ -311,4 +486,16 @@ src/content/knowledgebase/
 | 
			
		||||
├── concept-hash-functions-digital-signatures.md
 | 
			
		||||
├── concept-regex-pattern-matching.md
 | 
			
		||||
└── concept-chain-of-custody.md
 | 
			
		||||
 | 
			
		||||
public/videos/
 | 
			
		||||
├── tools/
 | 
			
		||||
│   ├── autopsy-timeline-tutorial.mp4
 | 
			
		||||
│   ├── volatility-basics-demo.mp4
 | 
			
		||||
│   └── yara-rules-advanced.webm
 | 
			
		||||
├── methods/
 | 
			
		||||
│   ├── timeline-analysis-walkthrough.mp4
 | 
			
		||||
│   └── disk-imaging-best-practices.mp4
 | 
			
		||||
└── concepts/
 | 
			
		||||
    ├── hash-functions-explained.mp4
 | 
			
		||||
    └── chain-custody-procedures.mp4
 | 
			
		||||
```
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user