Eliminiere schwarze Streifen in YouTube-Thumbnail

Merkmal
1

YouTube-Einbettungen wurden vor einiger Zeit verbessert, indem schwarze Balken entfernt wurden, falls vorhanden.

Diese bleiben jedoch in Thumbnails vieler Videos bestehen. Kann dies auch behoben werden?

3 „Gefällt mir“
2

Die spezifische Änderung bezüglich der schwarzen Balken lag daran, dass das maxresdefault-Bild anstelle des hqdefault-Bildes verwendet wurde. Nicht alle Videos haben jedoch ein hochauflösendes Miniaturbild. In diesen Fällen greifen wir auf das OpenGraph-Bild zurück, das dem hqdefault entspricht.

Diese Bildgröße hat ein anderes Seitenverhältnis und enthält schwarze Balken. Aber in beiden Fällen ist das Seitenverhältnis auf 16:9 festgelegt, sodass die schwarzen Balken bei der Anzeige des Players nicht sichtbar sein sollten.

Hier ist ein Beispiel für ein Video, das kein hochauflösendes Bild hat und dieses hier für das Miniaturbild verwendet.

Können Sie Beispiele teilen, wo dies passiert?

3 „Gefällt mir“
3

Gerne, danke für Ihr Interesse.

Hier sind ein paar Videos, die jetzt gut in der Einbettung aussehen, aber beim Thumbnail (und in der Vorschau) schwarze Balken aufweisen:

og:image ist:

480×360 39.9 KB

wie Sie zu Recht bemerken … hat schwarze Balken.

Und

og:image ist:

480×360 37.4 KB

wie Sie zu Recht bemerken … hat schwarze Balken …

Hinweis: Hier ist ein „guter Fall“:

og:image ist in diesem Fall viel größer:

1280×720 71.5 KB

Ich verwende derzeit mein Topic List Previews Sidecar-Plugin, um die Thumbnails neu zu generieren, während ich sie mit den benutzerdefinierten Overrides des Plugins zuschneide:

… aber ein automatisierter Weg, dies im Kern zu tun, wäre großartig, da es sehr nervig ist, dies immer wieder halb manuell tun zu müssen.

Die Herausforderung besteht darin, zu identifizieren, welche Bilder zugeschnitten werden können?

Ist es nur eine Frage des Erzwingens von 16:9, wenn man feststellt, dass das YouTube-Bild 4:3 oder unter einer bestimmten Auflösung liegt (was bedeutet, dass es schwarze Balken haben muss?).

Ich schätze, das könnte bedeuten, dass „optimize image“ ein Flag übergeben wird, um ihm mitzuteilen, dass es sich um YouTube handelt?

Es erscheint mir seltsam, dass YouTube keine standardisierten 16:9-Thumbnails verwendet?! Vielleicht übersehe ich etwas …

Danke, dass Sie mich über den Größenunterschied aufgeklärt haben!

4

Ich glaube, ich verstehe jetzt, was Sie meinen, aber die Bildverarbeitung auf dem Kern passt nicht wirklich zu unserem Anwendungsfall dafür. Wir speichern die Thumbnails für diese Einbettungen nicht, sondern rufen sie direkt von YouTube ab, wenn wir sie benötigen.

Das heißt, die Identifizierung, welche Bilder zugeschnitten werden sollen, sollte nicht allzu schwierig sein. Sie können sich die URL dafür ansehen:

https://img.youtube.com/vi/dsVAzSG6SbM/hqdefault.jpg

maxresdefault

  • Es ist immer 16:9.
  • Es ist die höchste Auflösung.
  • Nicht immer verfügbar.

hqdefault

  • Es ist immer 4:3.
  • Wenn das Originalvideo 16:9 ist, werden schwarze Balken hinzugefügt.

mqdefault

  • Es ist immer 16:9.
  • Es ist eine noch niedrigere Auflösung als hqdefault.

Obwohl etwas seltsam, sind sie vorhersehbar. Ich vermute, dass das 4:3-Format eine Legacy-Größe ist, die sie aus Kompatibilitätsgründen immer noch verwenden.

Für die Anzeige von 16:9-Bildern ist es so einfach wie die Korrektur des Seitenverhältnisses. Wenn Sie andere Seitenverhältnisse benötigen, denke ich, dass Sie gut damit fahren, ein Flag zu übergeben und die Skalierung mit CSS zu kompensieren.

Es stimmt, dass die Vorschau des Komponisten verbessert werden kann, aber dies könnte mit einem ähnlichen Ansatz wie oben beschrieben erfolgen.

Der einzige Ausnahmefall, den ich bei diesem Ansatz sehe, sind vertikale Videos mit niedrig aufgelösten Thumbnails. In diesem Fall werden die schwarzen Balken nicht angezeigt. :man_shrugging:

480×360 11.4 KB

2 „Gefällt mir“
5

Aber Core erstellt und speichert doch eigene abgeleitete Thumbnails in verschiedenen Auflösungen als Teil des Koch-Post-Prozesses?

Hier bleiben die schwarzen Balken erhalten.

Bingo!

Aber auf jeden Fall sind das super hilfreiche Informationen, die ich vielleicht nutzen kann, um mein Plugin zu verbessern. Vielen Dank!

Das ist viel einfacher, als GPT-4 Vision zu fragen, ob schwarze Balken vorhanden sind oder ImageMagick zu verwenden, um sie zu erkennen.

1 „Gefällt mir“
6

Dank Ihres Einblicks habe ich Topic List Previews mit einer viel einfacheren Lösung aktualisiert, die nicht umgeschaltet werden muss, da sie nur zugeschnitten wird, wenn das Bild ein YouTube Legacy 4:3-Thumbnail ist.

Vielleicht ist dies allgemein genug, um für den Kern nützlich zu sein?

2 „Gefällt mir“