Responsive Videoelemente und Codecs

Video ↑ ist ein Beispiel für die Verwendung von mave-clip, der in die Benutzeroberfläche integriert ist auf monumental.co

Während wir alle verblüfft sind, wie schnell sich die Videoproduktion aufgrund der Weiterentwicklung der Technologien verändert, versuchen wir auch immer noch herauszufinden, wie wir diese Videos ins Internet stellen. Kürzlich erhielten wir die Frage, ob es möglich sei, die rohe MP4-Datei von unserem System abzurufen, da diese Person sie als Teil ihrer Benutzeroberfläche verwenden wollte. Obwohl dies möglich ist und Sie theoretisch einfach eine rohe MP4-Datei in Ihre Website einbetten könnten, haben wir erklärt, wie wir unsere Komponenten entwickelt haben, um von mehreren Optimierungen zu profitieren und Ihren Benutzern ein besseres Erlebnis zu bieten.

Daher hielten wir es für sinnvoll, einen Blog-Beitrag darüber zu erstellen, was unsere Komponenten tatsächlich tun, beginnend mit <mave-clip> (Dokumente lesen) und Ihnen einen Einblick zu geben, wo das Video derzeit im Web steht, was die Anzeige betrifft (und nein, nicht die Generierung). Und obwohl wir über unsere Komponentenbibliothek sprechen, die unsere Implementierung darstellt, gelten dieselben Prinzipien für jedes Video, das Sie ins Internet stellen möchten.

Das Problem

Wenn Sie es nicht wissen, ist es Ihnen auch egal. Aber wenn du es erst einmal weißt, wird es dich sehr interessieren. Beginnen wir also mit dem Problem. Videos sind nicht so einfach wie Bilder, obwohl man das erwarten würde, denn es ist nur ein <video>-Element, oder? Nun, es gibt einen kleinen Unterschied zwischen Bildern und Videos: Es ist die Dateigröße. Und das würde Ihnen nur dann auffallen, wenn Ihre Benutzer Ihre hervorragende Verbindung nicht nutzen und/oder während einer Zugfahrt auf einem Telefon auf Ihrer Website surfen.

Natürlich möchten Sie Ihr Video in höchster Qualität bereitstellen – aber Sie möchten auch, dass es schnell ist. Nun… das kannst du! In den meisten Fällen müssen Sie sich jedoch nicht um mehrere Wiedergaben kümmern oder sich um mehrere Codecs kümmern, um sicherzustellen, dass Ihr Video auf allen Geräten und Browsern in höchstmöglicher Qualität und mit der geringstmöglichen Datenmenge abspielbar ist. Und da wird es kompliziert.

Die Lösung

Scott Jehl hat auf seiner Website einen tollen Blog-Beitrag über responsive Videos geschrieben (danke @Florisch in unserem Discord, dass du das mit uns geteilt hast). Er weist darauf hin, dass Videos „einen enormen Einfluss auf die Leistung, die Datenkosten der Benutzer, die Hosting-Kosten der Websites und den Gesamtenergieverbrauch haben“. Sein Beitrag ist also ein guter Anfang für die Implementierung der Lösung für verschiedene responsive Videoquellen. Dies geschieht durch die Verwendung von Medienabfragen, einem CSS-Trick, der seit Kurzem von allen gängigen Browsern im Element <video> unterstützt wird. Es ist so einfach wie:

<video>
  <source src="large.mp4" media="(max-width: 1280px)" />
  <source src="medium.mp4" media="(max-width: 1080px)" />
  <source src="small.mp4" media="(max-width: 720px)" />
  <!-- Fallback if your browser doesn't support media query in source -->
  <source src="medium.mp4" />
</video>

Beim Hochladen auf mave.io erstellen wir diese verschiedenen Wiedergaben für Sie. Abhängig von der Breite Ihres Geräts können wir also das richtige Video bereitstellen. Aber das ist noch nicht alles.

Ohne Einbußen bei der Qualität können wir auch die Dateigröße pro Videoauflösung verringern. Und das hat mit der Verwendung unterschiedlicher Codecs zu tun. Die meisten Videos im Internet verwenden heutzutage den h264-Codec, der weitgehend unterstützt wird. Aber mit der Einführung von HVEC (von Apple übernommen) und AV1 (von Google übernommen) gibt es mehr Optionen, die in Browsern verwendet werden können. Durch die Verwendung eines bestimmten Codecs kann die Dateigröße im Vergleich zu h264 um 50 % oder mehr verringert werden, was unabhängig von der Auflösung einen noch größeren Einfluss hat!

Der Nachteil dabei ist jedoch, dass es vom Element <video> (noch?) nicht unterstützt wird, wie wir es bei der Medienabfrage getan haben. Wir müssen etwas Javascript implementieren, um den Codec basierend auf dem Browser zu wechseln. Der Grund dafür ist, dass einige Browser mehrere Codecs unterstützen und Sie diese optimieren möchten, indem Sie den besten für diesen bestimmten Browser auswählen. Daher entfernen wir eine Quelle, die einen bestimmten Codec verwendet, wenn es besser ist, einen anderen zu wählen. Das ist etwas komplizierter, aber es lohnt sich auf jeden Fall.

Unsere (Pseudo-)Implementierung

Dazu müssen wir mehrere Wiedergabeversionen vorbereiten, mehrere Größen erstellen, aber auch jede Größe mit mehreren Codecs erstellen. Sobald Sie das haben, führen wir etwa den folgenden Code aus, um die besten Quellen zu erhalten:

// We give back the codec the browser prefers
// and give h264 as fallback
function getCodecs() {
  const ua = navigator.userAgent;
  const isEdgeOnMac = /Edg/.test(ua) && /Mac OS/.test(ua);
  const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua);
  const isMacOS = /Mac OS/.test(ua);
  const isIOS = /iPhone|iPad/.test(ua);

  if ((isMacOS && (isSafari || isEdgeOnMac)) || isIOS) {
    return ["hevc", "h264"];
  }

  // Default to av1, h264 for all other combinations
  return ["av1", "h264"];
}

function getBestSources(sources) {
  return getCodecs().map((codec) =>
    sources.find((source) => source.type == codec)
  );
}

// Imaging giving it an array of source with
// the codecs defined and a list of multiple sizes, like:
const mySources = [
  { src: "h264.mp4", type: "h264" },
  { src: "av1.mp4", type: "av1" },
  { src: "hevc.mp4", type: "hevc" },
];

const sizes = [
  { name: "large", width: 1920 },
  { name: "medium", width: 1280 },
  { name: "small", width: 720 },
];

const bestSources = getBestSources(mySources);

// Now you can use the bestSources to create
// your video element using in multiple sizes
bestSources.forEach((source) => {
  sizes.forEach((size) => {
    const video = document.createElement("video");
    const sourceElement = document.createElement("source");

    sourceElement.src = `${size.name}_${source.src}`;
    sourceElement.type = "video/mp4";
    sourceElement.media = `(max-width: ${size.width}px)`;

    video.appendChild(sourceElement);

    document.body.appendChild(video);
  });
});

Wenn wir das mit der Medienabfrage kombinieren, können wir das beste Video für das Gerät und den Browser des Benutzers bereitstellen. Sie müssen den Code nicht vollständig verstehen, aber einfach ausgedrückt: Wir prüfen, welchen Codec Sie unterstützen können, gehen Ihre Liste der von Ihnen bereitgestellten Quellen durch (Auflösung und Codec) und generieren ein HTML-<video>-Element wie oben dargestellt.

Wenn Sie nach einer einfacheren Lösung suchen, können Sie unsere Komponente <mave-clip> verwenden. Wir erledigen das für Sie. Sie müssen lediglich Ihr Video auf unseren Dienst hochladen und schon kann es losgehen. Und wir integrieren sogar Lazy Loading – Ihr Video wird also nur dann geladen, wenn es im Ansichtsfenster angezeigt wird.

Das ist es. Ich weiß, dass es als generiertes Video nicht so beeindruckend ist, aber trotzdem ist es irgendwie cool. Sie verfügen über ein reaktionsfähiges Videoelement mit der besten Qualität und der geringstmöglichen Datenmenge.