Wie halte ich die Schärfe ein, wenn Sie Mp4 H264-Video im Browser verkleinern?

475
Daniel Vianna

Ich habe nach intensiver Recherche ein scharfes Video erstellt. Mein Problem ist jedoch jetzt, wenn Sie den Browser verkleinern. Ich versuche, etwas Ähnliches zu tun: https://framer.com/features/design/

Ich habe einige Leute von Framer kontaktiert und sie erwähnten, dass sie einen großen Retina-Bildschirm (höhere Pixeldichte) und ScreenFlow für die Erfassung und den Export ohne zusätzliche Komprimierungssoftware verwendeten. Mir ist aufgefallen, dass ScreenFlow die Option hat, einen Algorithmus zu verwenden, der die Schärfe beibehält, wenn das Video verkleinert wird.

Mein Workflow ist alles in Windows, wenn man bedenkt, dass die von mir verwendete Anwendung auch Windows ist.

Dies ist mein Arbeitsablauf: Camtasia erfasst mit einer festen Größe von 960 x 720 (ich habe gelesen, dass H264-Filmmaterial ein Vielfaches von 8 und 16 aufweisen sollte, um eine Pixelierung zu vermeiden). Importieren und bearbeiten Sie anschließend in Adobe Premiere den Export mit H264-Codec mit maximaler Ausgabe und Qualität. In Handbrake importieren, HQ1080p30-Voreinstellung wählen, Video für konstante Bildfrequenz und konstante Qualität von 15 ändern. Eine Ausgabe ist MP4-optimiert für das Web und keine Änderung der Größe.

Wenn mein Video mit der spezifischen Größe von 960 x 720 abgespielt wird, ist es perfekt. Wenn die Dinge jedoch kleiner werden, fällt auf, dass die Schrift unscharf wird, was für eine responsive Website schlecht ist.

Hinweis: Premiere, Camtasia und Handbrake haben nicht die Möglichkeit, einen Algorithmus zu verwenden, der die Schärfe beibehält, wenn die Größe verkleinert wird oder ich sie zumindest nicht finden konnte.

Ich habe einen kleinen HTML-Code in den Code-Stift eingefügt, damit Sie dieses Problem visualisieren können: https://codepen.io/danielvianna/pen/xrvzzJ

Hinweis: Ändern Sie einfach die Größen in (Vielfache von 8 und 16).

  • 832x624
  • 768 x 576
  • 704x528
0
"Premiere, Camtasia und Handbrake haben nicht die Möglichkeit, einen Algorithmus zu verwenden, der die Schärfe beibehält." Nichts davon ist relevant, es sei denn, Sie transcodieren tatsächlich für die jeweilige Größe für jeden Client zur Anzeigezeit. Soweit ich das beurteilen kann, bist du nicht. Sie backen die Auflösung zur Entwurfszeit in das Video ein. Ihr Problem besteht in der clientseitigen Video-Skalierung. Normalerweise werden Assets basierend auf Medienabfragen ausgetauscht. Video, ich vermute, wird etwas anderes erfordern. Yorik vor 7 Jahren 0
Ich bin kein Videoexperte und es scheint, als wüssten Sie mehr als ich. Was würde ich in diesem Fall tun? Daniel Vianna vor 7 Jahren 0
Das ist das Ding: Ich weiß nicht, was ich antworten soll. Eine "CSS-Medienabfrage" funktioniert möglicherweise, aber es ist mir nicht klar, ob das Video neu gestartet wird, wenn Sie die Größe des Browsers ändern. Medienabfragen sind eine Möglichkeit, verschiedene Assets je nach den Umständen zu laden. Dies bedeutet, dass mehrere Versionen entsprechend der Größe angepasst werden. Youtube macht dies übrigens mit seiner "Qualität" -Auswahl: Möglicherweise wird unter Umständen eine niedrig aufgelöste angezeigt. Wenn Sie jedoch einen 1080p-Monitor im Vollbildmodus verwenden, wird möglicherweise die größere Version angezeigt. Ihr Spieler erledigt das für Sie. Yorik vor 7 Jahren 0
Das Problem, auf das Sie reagieren, besteht darin, dass Algorithmen, die von Video-Playern und / oder Browsern verwendet werden, "schnell" (schnell bedeutet in der Regel weniger präzise Qualität). Einige Player verfügen über bessere Skalierungsmethoden, dies hängt jedoch vom Flash-Player oder von integrierten Funktionen des Browsers ab. Yorik vor 7 Jahren 0

0 Antworten auf die Frage

Verwandte Probleme