Optimieren von Videos für Größe und Qualität

In den letzten Jahren verwenden immer mehr Projekte Video als integralen Bestandteil der Anwendung. Dies ist eine großartige Richtung, da Videos ansprechender sind als Standbilder (Videos können die Konversionsrate verdoppeln und die auf der Website verbrachte Zeit verlängern) und als solche Kunden wirklich dazu anregen können, Details zu Produkten und Dienstleistungen zu erkunden. Es geht jedoch alles seitwärts, wenn es Probleme im Zusammenhang mit der Videowiedergabe gibt.

Probleme bei der Videowiedergabe hängen direkt mit der Größe und Bitrate des Videos zusammen. Ein Video mit großen Abmessungen oder einer hohen Bitrate dauert länger zum Herunterladen und erfordert ein Netzwerk mit höherer Geschwindigkeit, um reibungslos wiedergegeben zu werden. Dies führt zu längeren Startzeiten, und wenn das Netzwerk das Video nicht schnell genug liefern kann, wird das Video während der Videowiedergabe angehalten.

Es gibt aber eine Lösung! Indem wir grundlegende Optimierungen unserer Videos durchführen, bevor wir sie zu unseren Websites hinzufügen, können wir verhindern, dass diese Probleme für immer auftreten – nun, die meisten von ihnen. Alles, was wir wirklich tun müssen, ist, die Datei kleiner zu machen – auf die eine oder andere Weise. Der Trick ist also: Wie verkleinern wir die Datei, ohne die Qualität zu beeinträchtigen?

In diesem Artikel gehen wir durch die Tools und einige der Schritte, die Sie unternehmen können, um Ihre Videos für die Wiedergabe zu optimieren – all dies, um Verzögerungen zu vermeiden und Ihre wertvollen Kunden zu beeindrucken!

Daten aus der realen Welt

Es ist nicht ungewöhnlich, Websites mit extrem großen Videos zu finden, die beispielsweise als Helden-Hintergrundvideos verwendet werden. Bei meinen Recherchen habe ich Websites untersucht, die im mobilen HTTPArchive vom Dezember 2020 gefunden wurden, und es war nicht schwierig, eine große Anzahl von Websites zu erkennen, die standardmäßig riesige Videodateien laden, sowohl auf Mobilgeräten als auch auf dem Desktop.

Es ist natürlich fraglich, ob Sie die gleichen Einsparungen erzielen können, die ich hier zeigen werde, aber Sie erhalten einige nützliche Hinweise und Tipps, was Sie beim Umgang mit Videos beachten sollten. Tatsächlich ist es sehr einfach, versehentlich extrem große Videos auf Ihrer Website zu platzieren, wenn Sie nicht aufpassen, was dazu führt, dass sie für die meisten Ihrer Kunden fast unbrauchbar sind.

Die Kürbisfeldgeschichte

Stellen Sie sich vor, es ist Mitte Oktober und Sie suchen nach einem Kürbisbeet und einem Maislabyrinth, um einen Wochenendnachmittag mit Ihrer Familie zu verbringen. Bequem von Ihrem Desktop-Rechner aus suchen Sie im Internet nach einem Standort in der Nähe und finden den perfekten. Die Website sieht hübsch aus, mit einem wunderschönen Drohnen-4K-Video der Felder, das oben auf der Seite abgespielt wird. Sie wählen die URL aus und senden sie an sich selbst und Ihre Lieben, damit Sie gemeinsam diese Option auch unterwegs erkunden können.

Aber wenn Sie die Seite auf Ihrem Handy öffnen, bemerken Sie einen Fehler: Das Video versucht verzweifelt, auf Ihrem Handy abzuspielen, aber leider scheitert es daran. Das Video wird immer wieder unterbrochen und neu gestartet , was viel störender und ärgerlicher ist als auf Ihrem Computer. Irgendwann machen Sie weiter, setzen ein Lesezeichen für die URL und fahren mit Ihrer täglichen Routine fort.

Nach einem lustigen, schlammigen Tag (na ja, ich habe kürzlich in Seattle und Großbritannien gelebt, also sind Kürbisfelder schlammig), sind Sie wieder an Ihrem Computer: Vielleicht denken Sie noch einmal an dieses Video und fragen sich, warum es nicht abgespielt wurde gut auf deinem Handy. Nun, lassen Sie uns diagnostizieren, was los ist.

Sie können damit beginnen, DevTools in Ihrem Browser zu öffnen. Sobald die Seite geladen ist, können wir zur Registerkarte „Netzwerk“ wechseln und nach „Medien“ filtern, um alle Videodateien anzuzeigen:

Wir sehen, dass eine MP4-Datei heruntergeladen wird. Die Datei kommt nicht als eigenständige Datei über das Netzwerk; Vielmehr muss der Streaming-Dienst die Datei in einige Segmente aufteilen , sodass möglicherweise mehrere 206 -Anforderungen (Teilinhalt) für dieselbe Datei angezeigt werden.

Wenn wir uns die Antwortheader für diese Datei ansehen, können wir einige Details erkennen:

 accept-ranges: bytes access-control-allow-headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS Content-Length: 87690242 Content-Range: bytes 70025216-157715457/157715458 content-type: video/mp4 date: Fri, 22 Jan 2021 15:27:26 GMT last-modified: Mon, 24 Jun 2019 05:13:04 GMT server: Apache

Nun, einige dieser Zahlen sind etwas erschreckend, da sie etwas groß sind. Tatsächlich sind sie oft so groß, dass ich mir angewöhnt habe, Kommas hinzuzufügen, damit ich eine Vorstellung davon bekomme, wie groß die Dateien tatsächlich sind. In diesem Fall beträgt der teilweise Download 87 MB und die gesamte Datei 157.715.457 Bytes. Ja, das ist richtig, dieses Video ist 157 MB groß und es (versuchte) es heute früher auf mein Handy zu laden! Kein Wunder, dass es nicht gelang.

Was hat es also mit diesem Video auf sich?

Tauchen wir etwas tiefer ein. Anscheinend ist das Video viel zu groß, um es auf einem Handy mit weniger Speicher und langsamerem Netzwerk flüssig abzuspielen. Aber was brauchen wir, um es zu reparieren? Um herauszufinden, was genau das Problem ist, können wir FFMPEG verwenden, das Open Source und kostenlos ist und sich als eines der zuverlässigsten Tools zur Optimierung von Videos erweist. Wir könnten die Konfiguration in FFMPEG endlos optimieren, aber lassen Sie uns in diesem Artikel nur auf einige wichtige eingehen.

Beginnen wir also mit dem Diagnosetool namens FFprobe. FFprobe sammelt Informationen aus Multimedia-Streams und liefert Ihnen Details darüber, wie das Video codiert ist und wie es abgespielt wird. Es ist Teil des FFMPEG-Pakets und eigentlich ganz einfach zu verwenden.

Noch besser: Wenn Ihr Video bereits online ist, gibt es eine Online-Version von ffprobe, zu der wir sofort springen können. Geben wir also einfach die URL in das Formular ein und erhalten die Details zum Video zurück (z. B. Videoabmessungen, Bitrate und eine ganze Menge Metadaten).

Wenn ich die MP4-URL von der Kürbisfarm hinzufüge, sehen wir sofort eines der Probleme. Die show_format Antwort von ffprobe gibt eine Zusammenfassung zurück: Anscheinend gibt es 2 Streams und sie ist 62 Sekunden lang (was alles normal genug klingt, um keinen Verdacht zu erregen). Aber wenn wir zur Größe und Bitrate kommen, sehen wir sofort, wo das Video versagt.

Wie oben erwähnt, könnte es eine gute Idee sein, sich daran zu gewöhnen, Kommas zu diesen großen Zahlen hinzuzufügen. Wie sich herausstellt, ist das Drohnenmaterial, das über das Feld fliegt, tatsächlich 157 MB groß und hat eine Bitrate von 20 MB pro Sekunde! Damit das Video nahtlos abgespielt werden kann, muss das Netzwerk in der Lage sein, das Video mit einer Geschwindigkeit von mehr als 20 MBPS zu streamen , weshalb es auf dem Telefon ins Stocken geraten ist.

Was ist die ideale Wiedergabe-Bitrate?

Um Verzögerungen zu vermeiden, müssen wir das Video mit einer angemessenen Rate streamen . Hier wird die Bitrate wichtig. Bitrate ist die Wiedergabegeschwindigkeit des Videos. Damit der Browser das Video reibungslos abspielen kann, muss das Video schneller heruntergeladen als wiedergegeben werden – was bedeutet, dass das Video nur dann reibungslos wiedergegeben wird, wenn die Netzwerkgeschwindigkeit über 20 MBPS liegt. Wenn ich an Netzwerkgeschwindigkeiten denke, verlasse ich mich eher auf die Verkehrsprofile von WebPageTest:

Wie wir der obigen Übersicht entnehmen können, könnte das Video auf der „nativen Verbindung“ und auf der ultraschnellen Glasfaser-FIOS-Verbindung gut abgespielt werden (20 MBPS ist genau die erforderliche Geschwindigkeit, also muss hoffentlich nichts anderes in der heruntergeladen werden Hintergrund). Alle anderen Verbindungen haben jedoch eine Downlink-Geschwindigkeit, die deutlich unter 20 MBPS liegt. Wenn das Video mit diesen Geschwindigkeiten geladen wird, versucht der Player, das Video schneller zu konsumieren, als es heruntergeladen werden kann, und das Video bleibt dauerhaft stehen.

Die Bitrate Ihres Videos legt die minimale Netzwerkgeschwindigkeit fest, die Ihre Kunden verwenden können. Im Allgemeinen sollte die Bitrate Ihres Videos etwa 80 % des verfügbaren Durchsatzes im Netzwerk betragen. Ein 20-MBPS-Video benötigt also wirklich 24 MBPS Netzwerkdurchsatz, um das Video nahtlos abzuspielen. Jeder mit einer langsameren Verbindung wird eine ziemlich schlechte Erfahrung machen und das Video wahrscheinlich überhaupt nicht ansehen können. Genauer gesagt bedeutet dies, dass die Bitrate unter 7,2 MBPS bleiben muss, damit wir auf 4G reibungslos und seidig spielen können.

Können wir die Bitrate dieses Videos senken?

Jawohl! Sehen wir uns einige der Konfigurationen an, mit denen wir die Bitrate dieses Videos reduzieren können. Aber schauen wir uns zuerst die Daten an, die wir von FFprobe erhalten. Eine Sache, die ziemlich auffällig ist, ist der r_frame_rate Wert, der die Anzahl der Bilder pro Sekunde im Video angibt. Sein Wert ist 60000/1001. Dies bedeutet, dass die Bildrate für das Video 60 Bilder pro Sekunde beträgt. Typische Bildraten im Web sind jedoch 25–30, also können wir als Erstes das Video mit einer niedrigeren Bitrate neu codieren .

Eine andere Sache, die Sie im Auge behalten sollten, ist der Constant Rate Factor . In FFMPEG ist der Hauptmaßstab für Qualität/Größe die Constant Rate Factor (CRF)-Komprimierung mit Werten von 0 (keine Komprimierung) bis 50 (hohe Komprimierung). Der Standardwert für CRF in FFMPEG ist 23 (wenn Sie den CRF-Parameter weglassen, hat Ihr Video diesen Wert). Nach meiner persönlichen Erfahrung erzeugen Werte von 23-28 immer noch qualitativ hochwertige Videos , die im Web gut aussehen und in der Dateigröße stark reduziert sind.

Beginnen wir also mit 30 fps und einem CRF von 23 . Der Terminal-Befehl sieht folgendermaßen aus:

 ffmpeg -i input.mp4 -vcodec h264 -acodec aac -crf 23 -strict -2 :v fps=fps=30 output.mp4

Voila! Dies ergibt ein 81,5 MB großes Video – bereits eine Verbesserung von 48 %. Aber das Video ist immer noch sehr groß, mit einer Bitrate von 10 MBPS. Wenn wir CRF auf 28 setzen, sinkt die Datei auf 35,4 MB, mit einer Bitrate von 4,5 MBPS, was mit einer 4G-Verbindung viel wahrscheinlicher gut abgespielt wird.

Dies ist eine fünffache Verbesserung gegenüber dem Originalvideo . Um dieses Video noch zugänglicher zu machen, können wir die Größe des Videos anpassen, um es zu verkleinern. Das ist etwas, was wir im Streaming-Abschnitt unten besprechen werden.

Die Hungrig-auf-Pizza-Geschichte

Stellen Sie sich vor, Sie sind in Los Angeles, besuchen Sie vielleicht aus dem Ausland und wandern mit Ihrem Telefon herum und denken natürlich darüber nach, ein Stück Pizza zu schnappen. Du findest auf deinem Handy eine bemerkenswerte Pizzeria und beschließt, dorthin zu gehen. Sie haben vielleicht ein paar Videos und Heldenbilder auf der Seite bemerkt, aber wirklich jede Pizzeria sieht irgendwie gleich aus, also haben Sie sich nicht die Mühe gemacht, das Video anzusehen. Sie gehen und holen sich ein oder zwei Stück, bevor Sie zu Ihrem Hotel zurückkehren.

In dieser Nacht erhalten Sie eine SMS von Ihrem Mobilfunkanbieter, dass Sie viel mehr Daten verbraucht haben, als Sie sich vorgestellt haben (und definitiv viel mehr, als Sie ursprünglich geplant hatten!). Ein paar Taxis und die Pizza-Website – wie teuer war die Pizza-Website nochmal?

Sie öffnen die Pizza-Website in WebPageTest und überprüfen sie über eine mobile Verbindung:

44 MB Video . Wo kommt es her? Wenn wir darüber hinaus die Quelle und den Wasserfall etwas genauer untersuchen, können wir sehen, dass es sich tatsächlich um zwei Videos handelt! Glücklicherweise (oder leider?) konnte keiner vollständig heruntergeladen werden:

Dies wirft einige Bedenken und einige Fragen auf.

Erstens, warum wurden so viele Videos heruntergeladen, obwohl sie nicht automatisch abgespielt wurden? Wir haben noch nichts angeklickt, aber schon fast 40 MB Daten verbraucht. Die Antwort liegt wie immer in der Quelle. Nun, „Quelle anzeigen“, das heißt.

 <video class="video-js vjs-big-play-centered" controls preload="auto" width="1050" height="591" poster="assets/home_poster.jpg" data-setup='{"fluid": true}'>
  <source src="assets/home_1.mp4" type='video/mp4'> <source src="assets/home.webm" type='video/webm'>
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video>

Auf Anhieb sehen wir mindestens zwei Probleme:

• preload="auto"
  Wenn wir preload="auto" setzen, überschreiben wir die Standardeinstellung des Browsers und erzwingen das Herunterladen von Videos – unabhängig davon, ob Ihr Kunde „Play“ gedrückt hat oder nicht. Das standardmäßige preload -Attribut ist metadata und hätte zu einem Download von einigen 100 KB geführt. Zugegeben, es ist ein viel besseres Ergebnis für Website-Besucher, die dieses Video niemals ansehen werden.
• Videobestellung
  Wenn Sie mehrere Versionen des Videos haben (in diesem Fall: h264 .mp4- und VP8 .webm-codierte Videos), wählt der Browser das erste Video aus, das er abspielen kann. Jetzt unterstützt jeder moderne Browser mp4, während die meisten modernen Browser auch webm unterstützen (95,4 % weltweite Unterstützung laut CanIUse).

Ein Trick, den ich gerne verwende, ist das Einfügen der entsprechenden Videoquellzeile mit Javascript. Auf diese Weise haben Sie, wenn Sie auf bestimmten Bildschirmen kein Video bereitstellen möchten, nur ein leeres <video>-Tag – und es kann kein Video heruntergeladen werden.

window.onload = addAutoplay(); var videoLocation = document.getElementById("hero-video"); function addAutoplay() { if(window.innerWidth > 992){ videoLocation.setAttribute("autoplay",""); }; }
window.onload = addAutoplay(); var videoLocation = document.getElementById("hero-video"); function addAutoplay() { if(window.innerWidth > 992){ videoLocation.setAttribute("autoplay",""); }; }

Wenn wir jetzt eine ffprobe auf diesen beiden Videos durchführen, werden wir deutliche Größenunterschiede entdecken:

Das Webm ist 90% kleiner und hat trotzdem 0 Aufrufe , da jeder Browser das mp4 unterstützt. Diese beiden Videos sind beide 640×360 und 140 Sekunden lang. Das Ausführen des ffmpeg -Befehls von oben auf dem mp4 ergibt ein 12,4 MB großes Video, daher ist es wahrscheinlich, dass die Entwickler einen ähnlichen Prozess befolgt haben, um auch die .webm-Variante zu komprimieren und zu codieren. Vielleicht wäre preload="auto" für 12,5 MB doch nicht so schlimm.

Das zweite Video (Drohnenaufnahmen im Restaurant) wird in Full HD (1080p) aufgenommen, aber ebenfalls von 140 MB auf 35 MB komprimiert. 120er mit FFMPEG könnten also das Videogewicht auf dieser Seite von 160 MB auf 57 MB reduzieren. Das Umdrehen der Reihenfolge webm/mp4 würde bei 95 % der Browser, die dieses Format unterstützen, einige zusätzliche MB einsparen.

Was wäre, wenn wir es noch besser machen wollten, vielleicht die Videos auf Bildschirme unterschiedlicher Größe reagieren lassen würden? Nun, lasst uns noch kleinere Videos bekommen – mit responsiven Videos!

Das <video>-Tag unterstützt keine Medienabfragen, um verschiedene Videodateien auf verschiedenen Bildschirmen bereitzustellen, daher benötigen wir eine andere Methode, um Videos in der Größe des Gerätebildschirms bereitzustellen. Der einfachste Weg, dies zu erreichen, ist die Verwendung von Video-Streaming . Dadurch werden einige Javascript- und andere Assets für den Videoplayer hinzugefügt, die erforderlich sind, aber die Videoeinsparungen werden diese zusätzlichen Daten definitiv ausgleichen.

Wir können Videostreams mit FFMPEG erstellen (ich habe in der Vergangenheit solche Bash-Skripte verwendet), aber dazu müssen wir alle Größen und Einstellungen kennen, die wir verwenden möchten (und wie bereits erwähnt, hat FFMPEG viele Einstellungen! ).

Um das Streamen von Videos zu vereinfachen, gibt es APIs (z. B. api.video und Mux), wo Sie Ihr Video hochladen und die Tools Videostreams erstellen und Ihr Video für Sie hosten. Zur vollständigen Offenlegung arbeite ich an ersterem. Um meine Videoverarbeitungspipeline zu vereinfachen, verwende ich api.video, um meine Videos zu transcodieren und zu hosten. Mit der Upload-API kann ich jedes Video hochladen, und das Tool erstellt eine Streaming-Version mit vielen verschiedenen Abmessungen und Bitraten (derzeit 240p, 360p, 480p, 720p, 1080p und 4K).

Die Bitraten für die kleineren Videos werden stark reduziert, wenn die Abmessungen des Videos abnehmen. Das bedeutet, dass das Video auf kleineren Bildschirmen weniger Netzwerkkapazität benötigt und in langsameren Netzwerken abgespielt wird.

Der Kürze halber testen wir nur das Pumpkin-Patch-Video. Ich habe ähnliche Ergebnisse mit dem Drohnenvideo erhalten (das andere Pizzavideo ist nur 360p, daher profitiert es nicht sehr von kleineren Größen).

Hinweis : Bitte denken Sie daran, dass dieses Video derzeit ein 1080p-MP4-Video mit 60 fps ist und für alle Besucher 157 MB wiegt.

Mit einigen Optimierungen (CRF 28 und Reduzierung der Framerate auf 30 fps) wurde das Video auf 35,7 MB reduziert. Mithilfe von DevTools können wir Geräte emulieren, um zu sehen, wie viele Daten für die Videowiedergabe von Streaming-Videos auf unterschiedlich großen Bildschirmen verwendet werden.

Die folgende Tabelle zeigt die Gesamtmenge des verwendeten Datenverkehrs. Bei HLS-Video gibt es einen JavaScript-Player, CSS, Schriftarten usw., die etwa 1 MB zusätzlichen Overhead hinzufügen. Dies ist in den folgenden Summen enthalten:

Bei 1080p werden etwa 4 MB zusätzliche Assets für den Stream heruntergeladen, aber für jede andere Größe gibt es erhebliche Dateneinsparungen ohne Verlust der Videoqualität. Das Video wird nicht nur in der richtigen Größe für die Geräte angezeigt , sondern es ist auch viel weniger wahrscheinlich, dass es ins Stocken gerät, da die Bitrate für die Geräte reduziert wird, die höchstwahrscheinlich langsamere mobile Verbindungen haben.

Video-Streaming kümmert sich um Bildrate, Videogröße und Qualitätsprobleme und gewährleistet eine schnelle Wiedergabe auf Bildschirmen jeder Größe und in jedem Geschwindigkeitsnetzwerk.

„

Ein weiterer Vorteil des Video-Streamings: Wenn das Netzwerk langsam ist (oder plötzlich langsamer wird), kann der Player das angezeigte Video anpassen und eine Version des Videos mit geringerer Qualität abspielen – wodurch die Wiedergabe auf dem Gerät sichergestellt wird – auch bei schlechten Netzwerkbedingungen. (Sie können die verschiedenen Videos mit StreamOrNot testen, einem kleinen Open-Source-Projekt, das ich vor einiger Zeit veröffentlicht habe.

Nun, ist es nicht ein bisschen zu viel Overhead? Könnten wir nicht dasselbe (nur viel schneller) mit YouTube oder Vimeo machen? Das könnten wir sicherlich, aber dann wären wir nicht in der Lage, das Branding oder die Werbung vollständig aus dem Video zu entfernen, ganz zu schweigen von dem Overhead von Skripten, die in den Iframe des Videoplayers geladen werden. Außerdem möchten Sie das Video manchmal vielleicht als Hintergrundvideo auf Ihrer Produktseite verwenden und jegliche Art von externem Branding vermeiden.

Fazit

Wir stellen Bilder von unserer Kamera nicht direkt im Web bereit, aber wir komprimieren und ändern ihre Größe, um Qualität und Webleistung in Einklang zu bringen. Dasselbe sollte auch für Videodateien gemacht werden. Kleinere Videos beginnen schneller abzuspielen und hängen seltener ab, wodurch die Benutzererfahrung der Website verbessert wird.

In diesem Artikel sind wir durch ein paar einfache Schritte gegangen, um unsere Videos zu optimieren, zB indem wir die Qualität und die Framerate verringern. Wir haben uns auch angesehen, wie Video-Streaming es uns ermöglichen kann, ein reaktionsschnelleres Videoerlebnis für das Web zu schaffen – indem automatisch Videos bereitgestellt werden, die die richtige Größe für den Bildschirm des Geräts haben.

Vielen Dank fürs Lesen. Wenn Sie mehr erfahren möchten, können Sie hier, im Smashing Magazine und in meinem Blog mehr über Best Practices für Videos lesen:

• Videowiedergabe im Web: Der aktuelle Stand von Videos (Teil 1)
• Videowiedergabe im Web: Best Practices für die Videobereitstellung (Teil 2)
• Videos im mobilen Web verstecken