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"
      />
      Your browser does not support the video tag.
    </video>
  )
}

Häufige Attribute des <video>-Tags

Gut zu wissen: Wenn Sie das autoPlay-Attribut verwenden, 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: Wenn Sie das <video>-Tag verwenden, fügen Sie 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 Benutzer hinzu, die gehörlos oder schwerhörig sind. Verwenden Sie das <track>-Tag mit Ihren <video>-Elementen, um die Quellen für Beschriftungsdateien anzugeben.
• Barrierefreie Steuerelemente: Standard-HTML5-Videosteuerelemente werden für die Tastaturnavigation und die Kompatibilität mit Screenreadern empfohlen. Für erweiterte Anforderungen können Sie Drittanbieter-Player wie react-player oder video.js in Betracht ziehen, die barrierefreie Steuerelemente und eine konsistente Browsererfahrung 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: Betten Sie selbst gehostete Videos mit dem <video>-Tag ein, 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. Während diese Methode die Kontrolle über den Player einschränkt, bietet sie einfache Handhabung und Funktionen, die von diesen Plattformen bereitgestellt werden.

Wählen Sie die Einbettungsmethode, die den Anforderungen Ihrer Anwendung und der Benutzererfahrung entspricht, die Sie bieten möchten.

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 für das 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 Videokomponente 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>
      {/* Weitere Inhalte der Seite */}
    </section>
  )
}

Gut zu wissen: Beim Einbetten von Videos von externen Plattformen sollten Sie folgende Best Practices beachten:

• 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 Benutzer mit begrenzten Datenplänen.

Dieser Ansatz führt zu einer besseren Benutzererfahrung, da er verhindert, dass die Seite blockiert wird, was bedeutet, dass der Benutzer mit der Seite interagieren kann, während die Videokomponente 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>
      {/* Weitere 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 stellt sicher, dass Sie vollständige Eigentümerschaft und Kontrolle haben, frei von Einschränkungen externer Plattformen.
• Anpassung für spezifische Anforderungen: Ideal für einzigartige Anforderungen, wie dynamische Hintergrundvideos, ermöglicht es maßgeschneiderte Anpassungen, die sich an Design- und Funktionsanforderungen orientieren.
• Leistungs- und Skalierbarkeitsüberlegungen: Wählen Sie Speicherlösungen, die sowohl leistungsstark als auch skalierbar sind, um steigenden Traffic und Inhaltsgrößen 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 aus.

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 zu Vercel Blob

Navigieren Sie in Ihrem Vercel-Dashboard zur Registerkarte "Storage" und wählen Sie Ihren Vercel Blob-Speicher aus. 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. Nachdem der Upload abgeschlossen ist, wird die Videodatei in der Blob-Tabelle angezeigt.

Alternativ können Sie Ihr Video über eine 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 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>
  )
}

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

Wenn Sie diesem Ansatz folgen, können Sie Videos effektiv selbst hosten und in Ihre Next.js-Anwendungen integrieren.

Ressourcen

Um mehr über die Optimierung von Videos 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 Web-Optimierung, für Ihre Videoanforderungen. Weitere Details finden Sie in Mozillas Leitfaden zu Video-Codecs.
• Videokompression: Verwenden Sie Tools wie FFmpeg, um Videos effektiv zu komprimieren und dabei Qualität und 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 mobile Geräte.
• Content Delivery Networks (CDNs): Nutzen Sie ein CDN, um die Geschwindigkeit der Videoauslieferung zu verbessern und hohen Traffic zu bewältigen. Bei der Verwendung einiger Speicherlösungen, wie Vercel Blob, wird die CDN-Funktionalität automatisch für Sie gehandhabt. Erfahren Sie mehr über CDNs und deren 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 für die 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 zum Erstellen 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-Lösungen für Video on Demand und Streaming-Medien in Next.js.

Integration mit ImageKit.io

• Schauen 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.