Video-Optimierung

Diese Seite beschreibt, wie Sie Videos in Next.js-Anwendungen verwenden und wie Sie Videodateien speichern und anzeigen können, ohne die Leistung zu beeinträchtigen.

Verwenden von <video> und <iframe>

Videos können auf der Seite mithilfe des HTML <video>-Tags für direkte Videodateien und <iframe> für extern gehostete Videos eingebettet werden.

<video>

Das HTML <video>-Tag kann selbst gehostete oder direkt bereitgestellte Videoinhalte einbetten und bietet volle Kontrolle über Wiedergabe und Darstellung.

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="/path/to/video.mp4" type="video/mp4" />
      <track
        src="/path/to/captions.vtt"
        kind="subtitles"
        srcLang="en"
        label="English"
      />
      Ihr Browser unterstützt das Video-Tag nicht.
    </video>
  )
}

Häufige <video>-Tag-Attribute

Hinweis: Bei Verwendung des autoPlay-Attributs ist es wichtig, auch das muted-Attribut einzuschließen, um sicherzustellen, dass das Video in den meisten Browsern automatisch abgespielt wird, sowie das playsInline-Attribut für die Kompatibilität mit iOS-Geräten.

Für eine umfassende Liste der Video-Attribute konsultieren Sie die MDN-Dokumentation.

Video-Best Practices

• Fallback-Inhalt: Verwenden Sie bei Verwendung des <video>-Tags Fallback-Inhalte für Browser, die keine Videowiedergabe unterstützen.
• Untertitel oder Untertitel: Fügen Sie Untertitel für Nutzer hinzu, die gehörlos oder schwerhörig sind. Nutzen Sie das <track>-Tag mit Ihren <video>-Elementen, um Untertitel-Dateiquellen anzugeben.
• Barrierefreie Steuerelemente: Standardmäßige HTML5-Videosteuerungen werden für Tastaturnavigation und Screenreader-Kompatibilität empfohlen. Für fortgeschrittene Bedürfnisse können Drittanbieter-Player wie react-player oder video.js mit barrierefreien Steuerelementen und konsistenter Browser-Erfahrung genutzt werden.

<iframe>

Das HTML <iframe>-Tag ermöglicht das Einbetten von Videos von externen Plattformen wie YouTube oder Vimeo.

export default function Page() {
  return (
    <iframe
      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
      frameborder="0"
      allowfullscreen
    />
  )
}

Häufige <iframe>-Tag-Attribute

Für eine umfassende Liste der Iframe-Attribute konsultieren Sie die MDN-Dokumentation.

Auswahl der Videoeinbettungsmethode

Es gibt zwei Möglichkeiten, Videos in Ihrer Next.js-Anwendung einzubetten:

• Selbst gehostete oder direkte Videodateien: Betten Sie selbst gehostete Videos mit dem <video>-Tag ein, wenn Sie detaillierte Kontrolle über Funktionalität und Darstellung des Players benötigen. Diese Integrationsmethode in Next.js ermöglicht Anpassung und Kontrolle Ihrer Videoinhalte.
• Verwendung von Video-Hosting-Diensten (YouTube, Vimeo usw.): Für Video-Hosting-Dienste wie YouTube oder Vimeo betten Sie deren iframe-basierte Player mit dem <iframe>-Tag ein. Diese Methode schränkt die Kontrolle über den Player zwar ein, bietet aber Benutzerfreundlichkeit und Funktionen dieser Plattformen.

Wählen Sie die Einbettungsmethode, die am besten zu den Anforderungen Ihrer Anwendung und der von Ihnen angestrebten Benutzererfahrung passt.

Einbetten extern gehosteter Videos

Um Videos von externen Plattformen einzubetten, können Sie Next.js verwenden, um die Videoinformationen abzurufen, und React Suspense, um den Fallback-Zustand während des Ladens zu handhaben.

1. Erstellen Sie eine Server-Komponente für die Videoeinbettung

Der erste Schritt ist die Erstellung einer Server-Komponente, die das entsprechende Iframe für die Videoeinbettung generiert. Diese Komponente ruft die Quell-URL für das Video ab und rendert das Iframe.

export default async function VideoComponent() {
  const src = await getVideoSrc()
 
  return <iframe src={src} frameborder="0" allowfullscreen />
}

2. Streamen der Videokomponente mit React Suspense

Nach der Erstellung der Server-Komponente zum Einbetten des Videos ist der nächste Schritt das Streamen der Komponente mithilfe von React Suspense.

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Video wird geladen...</p>}>
        <VideoComponent />
      </Suspense>
      {/* Weiterer Inhalt der Seite */}
    </section>
  )
}

Hinweis: Beachten Sie bei der Einbindung von Videos von externen Plattformen die folgenden Best Practices:

• Stellen Sie sicher, dass die Videoeinbettungen responsiv sind. Verwenden Sie CSS, um den Iframe oder den Videoplayer an verschiedene Bildschirmgrößen anzupassen.
• Implementieren Sie Strategien zum Laden von Videos basierend auf Netzwerkbedingungen, insbesondere für Benutzer mit begrenzten Datentarifen.

Dieser Ansatz führt zu einem besseren Benutzererlebnis, da die Seite nicht blockiert wird, was bedeutet, dass der Benutzer mit der Seite interagieren kann, während die Videokomponente gestreamt wird.

Um ein noch ansprechenderes und informativeres Laderlebnis zu bieten, erwägen Sie die Verwendung eines Ladegerüsts als Fallback-Benutzeroberfläche. Anstatt nur eine einfache Lademeldung anzuzeigen, können Sie ein Gerüst anzeigen, das dem Videoplayer ähnelt, wie folgt:

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
import VideoSkeleton from '../ui/VideoSkeleton.jsx'
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<VideoSkeleton />}>
        <VideoComponent />
      </Suspense>
      {/* Andere Inhalte der Seite */}
    </section>
  )
}

Selbst gehostete Videos

Das Selbsthosting von Videos kann aus mehreren Gründen vorzuziehen sein:

• Vollständige Kontrolle und Unabhängigkeit: Selbsthosting gibt Ihnen die direkte Verwaltung Ihrer Videoinhalte, von der Wiedergabe bis zum Erscheinungsbild, und gewährleistet vollständiges Eigentum und Kontrolle, frei von externen Plattformbeschränkungen.
• Anpassung für spezifische Anforderungen: Ideal für einzigartige Anforderungen wie dynamische Hintergrundvideos, ermöglicht es eine maßgeschneiderte Anpassung zur Abstimmung auf Design- und funktionale Bedürfnisse.
• Leistungs- und Skalierbarkeitsaspekte: Wählen Sie Speicherlösungen, die sowohl leistungsstark als auch skalierbar sind, um steigendes Traffic- und Inhaltsvolumen effektiv zu unterstützen.
• Kosten und Integration: Gleichen Sie die Kosten für Speicher und Bandbreite mit der Notwendigkeit einer einfachen Integration in Ihr Next.js-Framework und das breitere Tech-Ökosystem ab.

Verwendung von Vercel Blob für Videohosting

Vercel Blob bietet eine effiziente Möglichkeit, Videos zu hosten und stellt eine skalierbare Cloud-Speicherlösung bereit, die gut mit Next.js funktioniert. Hier ist, wie Sie ein Video mit Vercel Blob hosten können:

1. Hochladen eines Videos zu Vercel Blob

Navigieren Sie in Ihrem Vercel-Dashboard zur Registerkarte "Storage" und wählen Sie Ihren Vercel Blob-Speicher. Finden und klicken Sie in der oberen rechten Ecke der Blob-Tabelle auf die Schaltfläche "Upload". Wählen Sie dann die Videodatei aus, die Sie hochladen möchten. Nach Abschluss des Uploads erscheint die Videodatei in der Blob-Tabelle.

Alternativ können Sie Ihr Video mithilfe einer Server-Aktion hochladen. Detaillierte Anweisungen finden Sie in der Vercel-Dokumentation zu serverseitigen Uploads. Vercel unterstützt auch clientseitige Uploads. Diese Methode kann für bestimmte Anwendungsfälle vorzuziehen sein.

2. Anzeigen des Videos in Next.js

Sobald das Video hochgeladen und gespeichert ist, können Sie es in Ihrer Next.js-Anwendung anzeigen. Hier ist ein Beispiel, wie Sie dies mit dem <video>-Tag und React Suspense tun können:

import { Suspense } from 'react'
import { list } from '@vercel/blob'
 
export default function Page() {
  return (
    <Suspense fallback={<p>Video wird geladen...</p>}>
      <VideoComponent fileName="my-video.mp4" />
    </Suspense>
  )
}
 
async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 1,
  })
  const { url } = blobs[0]
 
  return (
    <video controls preload="none" aria-label="Videoplayer">
      <source src={url} type="video/mp4" />
      Ihr Browser unterstützt das Video-Tag nicht.
    </video>
  )
}

In diesem Ansatz verwendet die Seite die Video-URL von @vercel/blob, um das Video mit der VideoComponent anzuzeigen. React Suspense wird verwendet, um einen Fallback anzuzeigen, bis die Video-URL abgerufen und das Video zur Anzeige bereit ist.

Hinzufügen von Untertiteln zu Ihrem Video

Wenn Sie Untertitel für Ihr Video haben, können Sie diese problemlos mit dem <track>-Element innerhalb Ihres <video>-Tags hinzufügen. Sie können die Untertiteldatei von Vercel Blob ähnlich wie die Videodatei abrufen. So können Sie die <VideoComponent> aktualisieren, um Untertitel hinzuzufügen:

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 2,
  })
  const { url } = blobs[0]
  const { url: captionsUrl } = blobs[1]
 
  return (
    <video controls preload="none" aria-label="Videoplayer">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="Englisch" />
      Ihr Browser unterstützt das Video-Tag nicht.
    </video>
  )
}

Durch Befolgen dieses Ansatzes können Sie Videos effektiv selbst hosten und in Ihre Next.js-Anwendungen integrieren.

Ressourcen

Um weiter über Videooptimierung und Best Practices zu lernen, konsultieren Sie bitte die folgenden Ressourcen:

• Verstehen von Videoformaten und Codecs: Wählen Sie das richtige Format und den richtigen Codec wie MP4 für Kompatibilität oder WebM für Weboptimierung für Ihre Videobedürfnisse. Weitere Details finden Sie im Mozilla-Leitfaden zu Video-Codecs.
• Videokompression: Verwenden Sie Tools wie FFmpeg, um Videos effektiv zu komprimieren und Qualität mit Dateigröße auszugleichen. Lernen Sie mehr über Kompressionstechniken auf der FFmpeg-Website.
• Auflösungs- und Bitratenanpassung: Passen Sie Auflösung und Bitrate basierend auf der Anzeigeplatform an, mit niedrigeren Einstellungen für mobile Geräte.
• Content Delivery Networks (CDNs): Nutzen Sie ein CDN, um die Videobereitstellungsgeschwindigkeit zu verbessern und hohen Verkehr zu bewältigen. Bei einigen Speicherlösungen wie Vercel Blob wird die CDN-Funktionalität automatisch für Sie gehandhabt. Weitere Informationen über CDNs und ihre Vorteile.

Erkunden Sie diese Videostreaming-Plattformen für die Integration von Videos in Ihre Next.js-Projekte:

Open-Source next-video-Komponente

• Bietet eine <Video>-Komponente für Next.js, kompatibel mit verschiedenen Hosting-Diensten einschließlich Vercel Blob, S3, Backblaze und Mux.
• Ausführliche Dokumentation zur Verwendung von next-video.dev mit verschiedenen Hosting-Diensten.

Cloudinary-Integration

• Offizielle Dokumentation und Integrationsanleitung zur Verwendung von Cloudinary mit Next.js.
• Enthält eine <CldVideoPlayer>-Komponente für einsatzbereite Videounterstützung.
• Finden Sie Beispiele zur Integration von Cloudinary mit Next.js, einschließlich Adaptiver Bitratenstreaming.
• Weitere Cloudinary-Bibliotheken, einschließlich eines Node.js-SDK, sind ebenfalls verfügbar.

Mux Video-API

• Mux bietet eine Starter-Vorlage für die Erstellung eines Videokurses mit Mux und Next.js.
• Erfahren Sie mehr über Mux' Empfehlungen zur Einbettung von High-Performance-Videos für Ihre Next.js-Anwendung.
• Erkunden Sie ein Beispielprojekt, das Mux mit Next.js demonstriert.

Fastly

• Erfahren Sie mehr über die Integration von Fastlys Lösungen für Video on Demand und Streaming-Medien in Next.js.

ImageKit.io-Integration

• Werfen Sie einen Blick auf den offiziellen Schnellstartguide zur Integration von ImageKit mit Next.js.
• Die Integration bietet eine <IKVideo>-Komponente und ermöglicht nahtlose Videounterstützung.
• Sie können auch weitere ImageKit-Bibliotheken erkunden, wie beispielsweise das Node.js SDK, das ebenfalls verfügbar ist.