Autor: sven

(da ich mich gerade mit dem Thema auseinander gesetzt habe und dazu etwas mit Claude „gesprochen“ habe, habe ich das gleich mal in einem Artikel zusammenfassen lassen 🙂 )

Einleitung

Videos auf Webseiten sind beliebt – aber oft auch ein Performance-Killer. Eine unkomprimierte 1080p Video-Datei kann leicht 100+ MB groß sein. Das bedeutet lange Ladezeiten, hohere Bandwir­tenkosten und frustrierte Besucher.

Aber es gibt eine Lösung: AV1-Codec.

Mit AV1 könnt ihr die gleiche Videoqualität mit 65-75% kleinerer Dateigröße erreichen. In diesem Guide zeige ich dir, wie du deine Videos automatisch mit AV1 und H.264-Fallback encodierst – komplett mit einem praktischen Bash-Script.

🎯 Warum AV1?

Das Problem mit H.264

H.264 ist der Standard-Codec seit Jahren – aber er ist veraltet:

• ❌ Große Dateigröße
• ❌ Höherer Speicherverbrauch bei Streaming
• ❌ Lizenzgebühren

AV1 – Der moderne Standard

AV1 ist der neue Standard und wird von allen modernen Browsern unterstützt:

• ✅ 65-75% kleinere Dateigröße bei gleicher Qualität
• ✅ Google, Netflix, Amazon nutzen es bereits
• ✅ Kostenlos (keine Lizenzgebühren)
• ✅ Unterstützt von Chrome, Firefox, Edge, Safari (teilweise)

Zahlenbeispiel

Mit AV1 sparst du bei einer 1-Stunden-Doku über 3-4 GB Bandwirtenkosten monatlich!

🚀 Schnelle Lösung: Das Bash-Script

Ich habe dir ein Bash-Script erstellt, das alles automatisiert:

1. ✅ Prüft, ob dein Video Ton hat
2. ✅ Encodiert AV1-Version (ultra-klein)
3. ✅ Erstellt H.264-Fallback (für ältere Browser)
4. ✅ Generiert HTML-Code automatisch

Installation (3 Schritte)

Schritt 1: FFmpeg installieren

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows: Download von ffmpeg.org

Schritt 2: Script downloaden und ausführbar machen (am Ende des Artikels)

chmod +x encode-video.sh

Schritt 3: Im gleichen Ordner wie dein Video ausführen

./encode-video.sh

📋 So funktioniert das Script

Das Script stellt dir Fragen und encodiert dann automatisch:

📹 Geben Sie den Namen der Video-Datei ein: mein-video.mp4
🔊 Prüfe Audio-Track...
✅ Audio gefunden
💬 Soll der Audio-Track encodiert werden? (j/n): j
🚀 Encoding starten? (j/n): j

Nach einigen Stunden hast du dann:

• mein-video.av1.mp4 (sehr klein)
• mein-video.h264.mp4 (fallback)
• mein-video.html (webseite mit video)

⏱️ Wie lange dauert das Encoding?

Das ist eine gute Frage – AV1 ist effizient, aber braucht Zeit:

Tipp: Starte das Encoding über Nacht oder nutze einen dedizierten Server. Der Prozess ist CPU-intensiv, aber läuft im Hintergrund!

🌐 Videos auf deiner Webseite einbinden

Das Script generiert automatisch eine HTML-Datei. Falls du das Video manuell einbinden möchtest:

<video autoplay muted loop controls width="100%" height="auto">
  <source src="videos/mein-video.av1.mp4" type="video/mp4; codecs=av01.0.12M.08">
  <source src="videos/mein-video.h264.mp4" type="video/mp4">
  Dein Browser unterstützt leider kein HTML5 Video.
</video>

Attribute erklärt:

• autoplay – Video startet automatisch
• muted – Wichtig! Pflicht für Autoplay (Browser-Richtlinien)
• loop – Video wiederholt sich endlos
• controls – Play/Pause-Buttons zeigen
• width="100%" – Responsive (passt sich an Bildschirmgröße an)

Mit Vorschaubild:

<video autoplay muted loop controls 
       poster="thumbnail.jpg" 
       width="100%" height="auto">
  <source src="videos/mein-video.av1.mp4" type="video/mp4; codecs=av01.0.12M.08">
  <source src="videos/mein-video.h264.mp4" type="video/mp4">
  Dein Browser unterstützt leider kein HTML5 Video.
</video>

🎬 Fortgeschrittene FFmpeg-Befehle

Falls du das Script nicht nutzen möchtest – hier sind die manuellen Befehle:

AV1 Encoding (extrem kleine Dateigröße)

ffmpeg -i input.mp4 \
  -c:v libaom-av1 \
  -crf 35 \
  -cpu-used 2 \
  -tile-columns 2 \
  -tile-rows 2 \
  -c:a aac -b:a 96k \
  output.av1.mp4

Parameter:

• -crf 35 = Qualität (niedrig = besser, aber größer)
• -cpu-used 2 = CPU-Einsatz (0 = best quality but slow, 8 = fastest)
• -tile-* = Paralleles Encoding für schnellere Verarbeitung

H.264 Fallback

ffmpeg -i input.mp4 \
  -c:v libx264 \
  -crf 23 \
  -preset medium \
  -c:a aac -b:a 128k \
  output.h264.mp4

💡 Tipps für beste Ergebnisse

1. Resolution vorher reduzieren (optional)

Für Web brauchst du oft nicht 4K:

ffmpeg -i input.mp4 -vf scale=1920:-1 -c:v libx264 output.mp4

2. 2-Pass Encoding (für perfektionistische)

# Pass 1
ffmpeg -i input.mp4 -c:v libaom-av1 -crf 35 -cpu-used 4 -pass 1 -an -f null NUL

# Pass 2
ffmpeg -i input.mp4 -c:v libaom-av1 -crf 35 -cpu-used 4 -pass 2 -c:a aac -b:a 96k output.av1.mp4

3. Audio manuell anpassen

• Stereo (Musik/Film): 128 kbps
• Mono (Sprache): 64 kbps
• Keine Sprache/Musik: komplett weglassen (-an)

🔍 Browser-Kompatibilität

Die Kombination aus AV1 + H.264 bietet maximale Kompatibilität:

AV1 Support:

• ✅ Chrome 70+
• ✅ Firefox 64+
• ✅ Edge 88+
• ⚠️ Safari 16+ (teilweise)

H.264 Fallback:

• ✅ Safari (alle Versionen)
• ✅ Ältere Browser
• ✅ Mobile Geräte

Mit beiden Versionen sind deine Videos auf 99% aller Geräte optimiert!

📊 Performance vorher/nachher

Ein echtes Beispiel von unserer Agentur:

Die Verbesserung ist messbar!

❓ FAQ

Q: Wird Video-Qualität sichtbar schlechter?
A: Nein! Bei CRF 35 ist die Qualität für Web vollkommen ausreichend. Der menschliche Auge kann den Unterschied nicht erkennen.

Q: Kann ich ältere Videos auch nachträglich konvertieren?
A: Ja, absolut! Das Script funktioniert mit beliebigen Video-Dateien.

Q: Brauche ich eine spezielle Software neben FFmpeg?
A: Nein. FFmpeg ist kostenlos und alles, was du brauchst.

Q: Kann ich AV1 auf mobilen Geräten nutzen?
A: Ja! iOS 16+, Android 9+ unterstützen AV1. Der H.264-Fallback ist als Backup da.

Q: Muss ich alle Videos neu encodieren?
A: Nein – nur die, bei denen Performance wichtig ist. Oder nutze es bei allen Neu-Uploads.

🎯 Fazit

AV1 ist keine Zukunftstechnologie mehr – es ist heute. Mit dem bereitgestellten Script kannst du:

• ✅ Video-Dateigröße um 70% reduzieren
• ✅ Ladezeiten massiv verbessern
• ✅ Bandwirtenkosten sparen
• ✅ SEO-Rankings verbessern (schnelle Seiten ranken besser)
• ✅ Benutzer-Erfahrung optimieren

Die Investition von ein paar Stunden Encoding-Zeit rentiert sich schnell!

📥 Download & Ressourcen

• Bash Script und Minianleitung als ZIP herunterladen (.zip) – Automatisches AV1/H.264 Encoding
• FFmpeg Doku – Komplette Dokumentation

So recht weiß ich nicht was ich davon halten soll, das Mac Os, in einer Reihe von Dateitypen, (bisher aufgefallen bei PNG, JPG,PDF) speichert woher die Dateien stammen. Hier ein Beispiel (über Rechtsklick im Finder oder ForkLift)

Heißt jedes Bild auf meinem Rechner aus dem Netz

Selbst bei Bildern die man aus Mail heraus speichert…

Ein User bei Stackoverflow hat auch gleich gepostet wie man die Meta Daten entfernen kann,

# List all attributes
xattr -lvr /path/to/file

# Delete the wherefrom tag
xattr -d com.apple.metadata:kMDItemWhereFroms /path/to/file

Vielleicht lässt sich ja noch was finden, was Mac dazu bringt die Daten gar nicht erst zu schreiben.

Edit1:
Schöne Zusammenfassung auch für das erweiterte Attribute com.apple.quarantine
https://iboysoft.com/de/nachricht/com-apple-quarantine.html

Edit2:
und hier noch eine Schöne Erklärung für rekursives Löschen von Stackoverflow

xattr -rc /path/to/directory

Update: 20.02.2025

Gerade versucht eine PFX auf einem Mac zu öffnen und den Privat key und das Certificate in Text Form zu bekommen.

Nach gängigen Methoden im Netz ist es erst mal:

openssl pkcs12 -in [yourfile.pfx] -nocerts -out [drlive.key] (bei ibm.com gefunden)

Leider bekam ich da immer nur eine Fehlermeldung:

Error outputting keys and certificates
409C66E001000000:error:0308010C:digital envelope routines:inner_evp_generic_fetch:unsupported:crypto/evp/evp_fetch.c:355:Global default library context, Algorithm (RC2-40-CBC : 0), Properties ()

Den entscheidenden Hinweis habe ich dann hier bei stackoverflow gefunden.
Mein OpenSSL war zu „neu“, mit openssl musste ich bei den Zertifkate noch

-legacy

ergänzen. mein Aufruf der mich dann zum erfolg führte war folgender:

openssl pkcs12 -in example.pfx -info -legacy -nomacver

Update 2025:
Eine andere Variante die mir ChatGPT verraten hat:

Um das Zertifikat aus einer PFX-Datei zu extrahieren und im PEM-Format (also mit dem Header „—–BEGIN CERTIFICATE—–“) zu speichern, folgenden Befehl nutzen:

openssl pkcs12 -in datei.pfx -clcerts -nokeys -out cert.pem

Um den private Schlüssel unverschlüsselt in die Datei privkey.pem zu schreiben:

openssl pkcs12 -in datei.pfx -nocerts -nodes -out privkey.pem

Bei beiden Varianten wird das Password benötigt.

Wird wieder einmal benötigt wenn, auf einer Webseite der Text zu lange ist und es dann einen „mehr lesen“ Knopp geben soll. Fällt son bisschen in die Kategorie, „Dinge die die Welt nicht braucht“ ….

Aber na ja, manchmal gibt es Kunden die das benötigten und das hier ist der Recherche Ergebnis, so als Gedankenstütze, wenn ich das in 10min nicht mehr brauch und daher getrost vergessen kann.

Über die normale CSS Eigenschaft text-flow, für Einzeiler bin ich dann über kurz oder lang bei Css-tricks.com gelandet und habe da die für mich neue CSS Eigenschaft „line-clamp“ kennengelernt. Allerdings soll es noch einen Button am Ende geben, mit dem man das ganze öffnen und schliessen kann, das verlinkte JS war leider schon 10 Jahre alt… Schreckt erstmal ab.
Zudem soll dann natürlich auch noch eine kleine Animation beim öffnen und schliessen erfolgen.. da bin ich dann bei Derek Morash und seinem großartigen Artikel CSS line-clamp animation gelandet, von Mai 2023 🙂

Wirklich sehr schöner Artikel, direkt mit CodePen Beispiel: https://codepen.io/derekmorash/pen/abRjbpp

Und für den Fall das es mal offline gehen sollte, hier eine Kopie des Codes

HTML:
<div class="truncate truncate--line-clamped">
  <div class="truncate__inner">
    <h2>Click to expand</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac magna tellus. Curabitur sed faucibus leo. Vivamus id elit nec nisi ultrices rutrum. Sed ornare metus sit amet arcu pulvinar feugiat. Phasellus eleifend, dolor vitae malesuada dignissim, diam ligula semper purus, id pulvinar magna nibh nec neque. Ut auctor sodales dictum. Cras erat tortor, vestibulum et porttitor vitae, consequat et erat. Nullam ullamcorper tempor leo in fermentum. Curabitur ultrices tempus pulvinar. Proin a finibus odio. Pellentesque nec urna id ex facilisis dictum. Proin elementum cursus dolor, in molestie sem fermentum eget.</p>

    <p>In rutrum id eros sed tincidunt. Vivamus lobortis orci id orci elementum, eget molestie ante varius. Pellentesque imperdiet accumsan ipsum, vitae auctor lacus. Praesent sit amet imperdiet neque. Integer in orci ligula. Nulla finibus interdum sapien tincidunt vestibulum. Cras id risus eu nisl scelerisque faucibus. Donec tellus nibh, convallis eu nisi a, tempus sollicitudin elit. Cras lorem mauris, ullamcorper ac arcu a, sodales accumsan ex. Aliquam luctus lacinia nisi, id tincidunt tortor aliquam vestibulum. Fusce faucibus, felis id consectetur tempor, felis nunc bibendum nunc, sit amet porttitor erat ex quis tortor. Nulla mattis eros interdum dictum aliquet.</p>

    <p>Nunc at nisi ac dolor egestas tempus. Aenean ornare nibh risus. Nulla tristique eu tellus sed interdum. Duis eu ligula sed orci venenatis elementum. Nullam ullamcorper tellus a ultrices sollicitudin. Maecenas lacinia augue velit, a sodales libero feugiat sed. Sed mauris nisl, dignissim at placerat sed, aliquet vel dolor. Aliquam erat volutpat.</p>
  </div>
</div>

CSS:
*, :after, :before {
  box-sizing: border-box;
}

.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: var(--truncate-height, auto);
  max-width: 550px;
  margin: 0 auto;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.truncate--line-clamped {
  -webkit-line-clamp: 3;
}

.truncate--expanded {
  max-height: var(--truncate-height-expanded, auto);
}

JS:
const truncateEl = document.querySelector('.truncate');
const truncateInnerEl = document.querySelector('.truncate__inner');
const truncateRect = truncateEl.getBoundingClientRect();
let truncateInnerRect = truncateInnerEl.getBoundingClientRect();

truncateEl.style.setProperty("--truncate-height", `${truncateRect.height}px`);

truncateEl.addEventListener('click', () => {
  if (truncateEl.classList.contains('truncate--expanded')) {
    close();
  } else {
    open();
  }
});

function open() {
  truncateEl.classList.remove('truncate--line-clamped');
  window.requestAnimationFrame(() => {
    truncateInnerRect = truncateInnerEl.getBoundingClientRect();
    truncateEl.style.setProperty("--truncate-height-expanded", `${truncateInnerRect.height}px`);
    truncateEl.classList.add('truncate--expanded');
  });
}

function close() {
  truncateEl.classList.remove('truncate--expanded');
  setTimeout(() => {
    truncateEl.classList.add('truncate--line-clamped');
  }, 300);
}

Immer wieder kommt es vor, das man sich DNS Einträge von Domains einsehen bzw kontrollieren muss. Bisher bin ich immer über google und habe was wie mx record online/ dns checker online oder ähnlich Kram gegoogelt und bin zum Teil auf sehr dubiosen Seiten gelandet. Ab und an noch ein Captcha ausfüllen, CookieBanner wegklicken, nein ich möchte kein Newsletter anklicken, nein ich möchte keine Website Benachrichtigungen 😩😩😩 NUR die Information bitte …. NEIN, diese Services interessieren mich auch nicht *wegklicken* 🤬🤬🤬 ….
Ihr kennt es wahrscheinlich auch …

Zur Rettung kommt wie so oft, das Terminal/CMD/ITerm2 ….
die CommandLine:

In diesem Fall ist es das Tool „host – DNS lookup utility“

Beispiel:

host -t TXT blue-side.de

The -t option is used to select the query type. type can be any recognized query type: CNAME, NS, SOA, SIG, KEY, AXFR, etc. When no query type is specified, host automatically selects an appropriate query type. By default, it looks for A, AAAA, and MX records, but if the -C option was given, queries will be made for SOA records, and if name is a dotted-decimal IPv4 address or colon-delimited IPv6 address, host will query for PTR records. If a query type of IXFR is chosen the starting serial number can be specified by appending an equal followed by the starting serial number (e.g. -t IXFR=12345678).

Ausgabe Beispiel

Ein kleines simples Tool, but it made my day:

How to delete history without any trace

history -d $((HISTCMD-1)) && history -d NO_of_History_you_want_to_delete

if you want to excute a command without leaving any trace.

history -d $((HISTCMD-1)) && type_your_command_here_and_execute

hier gefunden

Auch Ich bin über dieses Problem im Zusammenhang mit TYPO3 und ddev 1.19 gestossen und habe dann den Artikel von Sven Wappler gefunden, in dem Stefan Frömken die Lösung in den Kommentaren erläutert. Vielen Dank an euch beide 🙂

In der von ddev erstellten AdditionalConfiguration.php muss folgendes ergänzt werden:

            'DB' => [
                'Connections' => [
                    'Default' => [
                        ....
                        'charset' => 'utf8mb4',
                         ...
                    ],
                ],
            ],

Danach caches leeren und es läuft wieder.