Verwendung und Optimierung von Videos

Diese Seite erläutert die Verwendung von Videos in Next.js-Anwendungen und zeigt, wie Videodateien gespeichert und angezeigt werden können, ohne die Leistung zu beeinträchtigen.

Verwendung von <video> und <iframe>

Videos können auf der Seite eingebettet werden, indem Sie das HTML-<video>-Tag für direkte Videodateien und <iframe> für extern gehostete Videos verwenden.

<video>

Das HTML-<video>-Tag kann selbst gehostete oder direkt bereitgestellte Videoinhalte einbetten und ermöglicht so die vollständige Kontrolle über die Wiedergabe und das Erscheinungsbild.

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 Attribute des <video>-Tags

Gut zu wissen: Bei Verwendung des autoPlay-Attributs ist es wichtig, auch das muted-Attribut einzufügen, 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.

Eine vollständige Liste der Videoattribute finden Sie in der MDN-Dokumentation.

Best Practices für Videos

• Fallback-Inhalt: Fügen Sie beim <video>-Tag Fallback-Inhalt innerhalb des Tags für Browser hinzu, die keine Videowiedergabe unterstützen.
• Untertitel oder Beschriftungen: Fügen Sie Untertitel oder Beschriftungen für gehörlose oder schwerhörige Nutzer hinzu. Verwenden Sie das <track>-Tag mit Ihren <video>-Elementen, um die Quellen für Beschriftungsdateien anzugeben.
• Barrierefreie Steuerelemente: Standard-HTML5-Videosteuerelemente werden für Tastaturnavigation und Screenreader-Kompatibilität empfohlen. Für erweiterte Anforderungen können Drittanbieter-Player wie react-player oder video.js verwendet werden, die barrierefreie Steuerelemente und ein konsistentes Browser-Erlebnis bieten.

<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/embed/19g66ezsKAg" allowFullScreen />
  )
}

Häufige Attribute des <iframe>-Tags

Eine vollständige Liste der iframe-Attribute finden Sie in der MDN-Dokumentation.

Auswahl einer Methode zum Einbetten von Videos

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

• Selbst gehostete oder direkte Videodateien: Verwenden Sie das <video>-Tag für selbst gehostete Videos, wenn Sie detaillierte Kontrolle über die Funktionalität und das Erscheinungsbild des Players benötigen. Diese Integrationsmethode in Next.js ermöglicht die 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 bietet zwar weniger Kontrolle über den Player, ist jedoch einfach zu verwenden und bietet Funktionen, die von diesen Plattformen bereitgestellt werden.

Wählen Sie die Einbettungsmethode, die den Anforderungen Ihrer Anwendung und dem gewünschten Nutzererlebnis entspricht.

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-Status während des Ladens zu handhaben.

1. Erstellen einer Server-Komponente zum Einbetten von Videos

Der erste Schritt besteht darin, eine Server-Komponente zu erstellen, die den entsprechenden iframe für das Einbetten des Videos generiert. Diese Komponente ruft die Quell-URL für das Video ab und rendert den iframe.

export default async function VideoComponent() {
  const src = await getVideoSrc()

  return <iframe src={src} allowFullScreen />
}

2. Streamen der Video-Komponente mit React Suspense

Nachdem Sie die Server-Komponente zum Einbetten des Videos erstellt haben, besteht der nächste Schritt darin, die Komponente mit React Suspense zu streamen.

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>
      {/* Andere Inhalte der Seite */}
    </section>
  )
}

Gut zu wissen: Beachten Sie beim Einbetten von Videos von externen Plattformen die folgenden Best Practices:

• Stellen Sie sicher, dass die Video-Einbettungen responsiv sind. Verwenden Sie CSS, damit der iframe oder Videoplayer sich an verschiedene Bildschirmgrößen anpasst.
• Implementieren Sie Strategien zum Laden von Videos basierend auf den Netzwerkbedingungen, insbesondere für Nutzer mit begrenzten Datenplänen.

Dieser Ansatz führt zu einer besseren Nutzererfahrung, da die Seite nicht blockiert wird, was bedeutet, dass der Nutzer mit der Seite interagieren kann, während die Video-Komponente gestreamt wird.

Für ein ansprechenderes und informativeres Ladeerlebnis können Sie ein Lade-Skeleton als Fallback-UI verwenden. Anstatt eine einfache Lade-Nachricht anzuzeigen, können Sie ein Skeleton anzeigen, das dem Videoplayer ähnelt:

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 Selbsthosten von Videos kann aus mehreren Gründen vorteilhaft sein:

• Vollständige Kontrolle und Unabhängigkeit: Selbsthosting gibt Ihnen direkte Kontrolle über Ihre Videoinhalte, von der Wiedergabe bis zum Erscheinungsbild, und gewährleistet so vollständige Eigentümerschaft und Kontrolle, frei von Einschränkungen externer Plattformen.
• Anpassung für spezifische Anforderungen: Ideal für besondere Anforderungen, wie dynamische Hintergrundvideos, ermöglicht es maßgeschneiderte Anpassungen, die Design- und Funktionsanforderungen entsprechen.
• Leistung und Skalierbarkeit: Wählen Sie Speicherlösungen, die sowohl leistungsstark als auch skalierbar sind, um steigenden Traffic und größere Inhalte effektiv zu unterstützen.
• Kosten und Integration: Balancieren Sie die Kosten für Speicher und Bandbreite mit der Notwendigkeit einer einfachen Integration in Ihr Next.js-Framework und das breitere Technologie-Ökosystem.

Verwendung von Vercel Blob für das Video-Hosting

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

1. Hochladen eines Videos in Vercel Blob

Navigieren Sie in Ihrem Vercel-Dashboard zur Registerkarte "Storage" und wählen Sie Ihren Vercel Blob-Speicher. 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 mit einer Server-Aktion hochladen. Detaillierte Anweisungen finden Sie in der Vercel-Dokumentation zu Server-seitigen Uploads. Vercel unterstützt auch Client-seitige 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 @vercel/blob-URL des Videos, 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 einfach mit dem <track>-Element innerhalb Ihres <video>-Tags hinzufügen. Sie können die Untertiteldatei auf ähnliche Weise wie die Videodatei aus Vercel Blob abrufen. So können Sie die <VideoComponent> aktualisieren, um Untertitel einzubinden.

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="English" />
      Ihr Browser unterstützt das Video-Tag nicht.
    </video>
  )
}

Durch diesen Ansatz können Sie Videos effektiv selbst hosten und in Ihre Next.js-Anwendungen integrieren.

Ressourcen

Um mehr über Videooptimierung und Best Practices zu erfahren, lesen Sie die folgenden Ressourcen:

• Verständnis 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 Videoanforderungen. Weitere Details finden Sie in Mozillas Leitfaden zu Videocodecs.
• Videokomprimierung: Verwenden Sie Tools wie FFmpeg, um Videos effektiv zu komprimieren und Qualität mit Dateigröße auszubalancieren. Erfahren Sie mehr über Komprimierungstechniken auf der offiziellen FFmpeg-Website.
• Anpassung von Auflösung und Bitrate: Passen Sie Auflösung und Bitrate basierend auf der Anzeigeplattform an, mit niedrigeren Einstellungen für Mobilgeräte.
• Content Delivery Networks (CDNs): Nutzen Sie ein CDN, um die Videoliefergeschwindigkeit zu verbessern und hohen Traffic zu bewältigen. Bei Verwendung einiger Speicherlösungen, wie Vercel Blob, wird die CDN-Funktionalität automatisch für Sie gehandhabt. Erfahren Sie mehr über CDNs und ihre Vorteile.

Entdecken Sie diese Video-Streaming-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.
• Detaillierte Dokumentation zur Verwendung von next-video.dev mit verschiedenen Hosting-Diensten.

Cloudinary-Integration

• Offizielle Dokumentation und Integrationsanleitung für die Verwendung von Cloudinary mit Next.js.
• Enthält eine <CldVideoPlayer>-Komponente für Drop-in-Video-Unterstützung.
• Finden Sie Beispiele zur Integration von Cloudinary mit Next.js, einschließlich Adaptive Bitrate Streaming.
• Andere Cloudinary-Bibliotheken, einschließlich eines Node.js-SDK, sind ebenfalls verfügbar.

Mux Video API

• Mux bietet eine Startvorlage für die Erstellung eines Videokurses mit Mux und Next.js.
• Erfahren Sie mehr über Mux's Empfehlungen zum Einbetten von Hochleistungsvideos für Ihre Next.js-Anwendung.
• Erkunden Sie ein Beispielprojekt, das Mux mit Next.js demonstriert.

Fastly

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

Integration mit ImageKit.io

• Sehen Sie sich den offiziellen Schnellstart-Leitfaden für die Integration von ImageKit mit Next.js an.
• Die Integration bietet eine <IKVideo>-Komponente, die nahtlose Video-Unterstützung ermöglicht.
• Sie können auch andere ImageKit-Bibliotheken erkunden, wie beispielsweise das Node.js SDK, das ebenfalls verfügbar ist.