HTML Academy · Lektion

Das source-Element für mehrere Formate

Stellen Sie mit dem source-Element alternative Formate bereit

Das source-Element für mehrere Formate ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum mehrere Formate?

Verschiedene Browser unterstützen unterschiedliche Audio- und Videocodecs:

WebM (VP9/VP8) — Chrome, Firefox, Edge (nicht Safari)
MP4 (H.264) — alle Browser (universell)
OGG — Firefox, Chrome (nicht Safari)
OPUS — Chrome, Firefox, Edge (nicht Safari)

Mit dem <source>-Element können Sie mehrere Formate als Fallback bereitstellen.

source innerhalb von audio

Stellen Sie mehrere Audioformate bereit:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

source innerhalb von video

Stellen Sie mehrere Videoformate bereit:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

Das type-Attribut von source

Das type-Attribut teilt dem Browser den MIME-Typ und Codec mit:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

So funktioniert die Auswahl von source

Der Browser prüft die source-Elemente der Reihe nach:

Liest das type des ersten source-Elements
Lädt es herunter und verwendet es, wenn dieser Typ abgespielt werden kann
Fährt andernfalls mit dem nächsten source-Element fort
Zeigt den Fallback-Inhalt an, wenn keine source funktioniert

Platzieren Sie das bevorzugte Format an erster Stelle (z. B. WebM für eine bessere Performance in Chrome und Firefox).

media-Attribut von source

Mit dem media-Attribut können Sie für verschiedene Viewports unterschiedliche Formate ausliefern:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Empfohlene Reihenfolge der Formate

Optimale Reihenfolge der Quellen für maximale Kompatibilität und Performance:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Empfehlungen für Audioformate

Empfehlungen für Audiocodecs:

OPUS in WebM — bestes Verhältnis von Qualität und Größe; Chrome, Firefox, Edge
AAC in MP4 — universell; Safari, Chrome, Firefox, Edge
MP3 — größte Kompatibilität; als letzten Fallback verwenden

Responsives Video mit srcset

Verwenden Sie bei Videos media auf source, um die Bandbreite anzupassen:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

canPlayType überprüfen

Testen Sie die Codec-Unterstützung des Browsers mit JavaScript:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Fallback-Inhalt

Fügen Sie innerhalb von audio/video immer Fallback-Inhalt ein:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Kurzer Test

In welcher Reihenfolge sollten Sie source-Elemente auflisten?

Zusammenfassung: source-Element

Grundlagen des source-Elements:

<source src type> innerhalb von audio/video stellt alternative Formate bereit
Der Browser wählt die erste passende source
Das modernste Format zuerst; MP4/AAC als universeller Fallback
Fügen Sie nach allen sources Fallback-Text oder einen Fallback-Link innerhalb von audio/video ein
Verwenden Sie media auf source, um Videos viewportabhängig auszuwählen

Häufig gestellte Fragen

Ist die Lektion „Das source-Element für mehrere Formate“ kostenlos?

Ja — der vollständige Text von „Das source-Element für mehrere Formate“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das source-Element für mehrere Formate“?

Stellen Sie mit dem source-Element alternative Formate bereit Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Das source-Element für mehrere Formate“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Das audio-Element: src controls loop autoplay
Das video-Element und Seitenverhältnisse
Das source-Element für mehrere Formate
Untertitel mit track und WebVTT

← Zurück zu HTML Academy