====== HTML5: Eingebettete Medien (Embedded Media) ======

In HTML5 können externe Inhalte, Multimedia-Dateien und interaktive Zeichenflächen direkt in Webseiten eingebunden werden[cite: 6]. DokuWiki nutzt dafür standardmäßig spezielle Tags zur sauberen Strukturierung[cite: 6].

===== 1. Inline Frames (<iframe>) =====

Das ''<iframe>''-Element ermöglicht es, ein separates HTML-Dokument als „Window-in-a-Window“ (verschachtelter Browsing-Kontext) in die aktuelle Seite einzubetten[cite: 6]. 

**Typische Anwendungsfälle:**
  * Videos (z. B. YouTube)[cite: 6]
  * Interaktive Karten (z. B. Google Maps)[cite: 6]
  * Werbebanner[cite: 6]

==== Syntax und Attribute ====
<code html>
<iframe src="glossary.html" width="400" height="250">
  Your browser does not support inline frames. Read the <a href="glossary.html">glossary</a>.
</iframe>
</code>

  * **src:** Pfad oder URL zum einzubettenden Dokument[cite: 6].
  * **width / height:** Abmessungen des Fensters in Pixeln[cite: 6].
  * **Fallback-Inhalt:** Der Text/Link innerhalb von ''<iframe>...</iframe>'' wird nur angezeigt, wenn der Browser keine Inline-Frames unterstützt[cite: 5, 6].

===== 2. Generisches Objekt-Element (<object>) =====

Das ''<object>''-Element ist ein universeller Container zum Einbetten externer Medien oder Anwendungen (ggf. unter Nutzung von Browser-Plug-ins)[cite: 6].

==== Syntax und Einbindung ====
<code html>
<object data="picture.svg" type="image/svg+xml">
  <img src="picture.png" alt="Ersatzbild">
</object>
</code>

  * **data:** Verweist auf die Mediendatei[cite: 6].
  * **type:** Spezifiziert den MIME-Typ der Ressource[cite: 6].
  * **Fallback:** Der Inhalt innerhalb des Tags wird angezeigt, wenn der Dateityp nicht unterstützt wird[cite: 6].

==== Nutzung von Parametern (<param>) ====
Manche Medienformate benötigen spezifische Einstellungen, die über den Tag ''<param>'' übergeben werden[cite: 6]:

<code html>
<object type="video/quicktime" data="movies/hekboy.mov" width="320" height="256">
  <param name="autostart" value="false">
  <param name="controller" value="true">
</object>
</code>

===== 3. HTML5-Videoplayer (<video>) =====

Das ''<video>''-Element erlaubt das direkte Abspielen von Videos ohne externe Plugins[cite: 6]. Es bringt zudem eine Steuerungsschnittstelle (API) mit[cite: 6].

==== Standard-Syntax ====
<code html>
<video src="windtunnel.mp4" width="320" height="262" poster="windtunnel_still.jpg" controls autoplay>
  Get the <a href="windtunnel.mp4">MP4 wind tunnel video</a>
</video>
</code>

==== Attribute des <video>-Elements ====
^ Attribut ^ Beschreibung ^
| **width / height** | Spezifische Abmessungen in Pixeln[cite: 6]. |
| **poster** | Speicherort eines Standbilds (Vorschaubild), bevor das Video startet[cite: 6]. |
| **controls** | Blendet die Standard-Steuerelemente des Browsers ein (Play, Pause, Lautstärke, etc.)[cite: 6]. |
| **autoplay** | Startet die Wiedergabe automatisch beim Laden der Seite[cite: 6]. |

==== Multi-Source-Einbindung (<source>) ====
Da nicht jeder Browser jedes Videoformat unterstützt, sollten verschiedene Formate via ''<source>''-Tag bereitgestellt werden[cite: 6]. Der Browser lädt die erste kompatible Datei[cite: 6]. *(Tipp: Kleinste Dateigrößen zuerst listen[cite: 6])*

<code html>
<video id="video" controls poster="img/poster.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.ogg" type="video/ogg">
  <a href="clip.mp4">Download the MP4 of the clip.</a>
</video>
</code>

==== Kompatibilität von Videoformaten ====
  * **MP4 (H.264 / AAC):** Am besten unterstützt (IE, Edge, Chrome, Firefox, Safari, Opera, Mobile)[cite: 6].
  * **WebM (VP8/VP9):** Unterstützt von Chrome, Firefox, Opera, Edge[cite: 6].
  * **Ogg Theora:** Unterstützt von Chrome, Firefox, Opera[cite: 6].

===== 4. HTML5-Audioplayer (<audio>) =====

Das ''<audio>''-Element funktioniert analog zum Videoplayer, verzichtet aber auf Attribute wie ''width'', ''height'' oder ''poster''[cite: 6].

<code html>
<audio id="threeoclock" controls preload="auto">
  <source src="jetfighter.mp3" type="audio/mp3">
  <source src="jetfighter.ogg" type="audio/ogg">
  <source src="jetfighter.webm" type="audio/webm">
  <p>Download <a href="jetfighter.mp3">"Jet Fighter"</a></p>
</audio>
</code>

==== Kompatibilität von Audioformaten ====
  * **MP3 (audio/mpeg):** Am breitesten unterstützt (IE, Edge, Chrome, Firefox, Safari, Opera, Mobile)[cite: 6].
  * **WAV / Ogg / WebM:** Werden von vielen modernen Browsern unterstützt, jedoch nicht flächendeckend (z. B. Ogg nicht im Safari/iOS)[cite: 6].

===== 5. Text-Tracks / Untertitel (<track>) =====

Das ''<track>''-Element dient dem Einfügen von synchronisierten Textdaten in Video- oder Audio-Dateien[cite: 6].

**Einsatzbereiche:** Untertitel, Sprachbeschreibungen für Sehbehinderte, Kapiteltitel, Metadaten[cite: 6].

<code html>
<video width="640" height="320" controls>
  <source src="japanese_movie.mp4" type="video/mp4">
  <source src="japanese_movie.webm" type="video/webm">
  <track src="english_subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles" default>
  <track src="french.vtt" kind="subtitles" srclang="fr" label="Sous-titres en français">
</video>
</code>
*(Format der Textdateien: **.vtt** / WebVTT)[cite: 6]*

===== 6. Dynamische 2D-Zeichenfläche (<canvas>) =====

Das ''<canvas>''-Element definiert eine leere 2D-Bitmap-Fläche, auf der mithilfe von **JavaScript** dynamisch Grafiken, Animationen oder Spiele gerendert werden können[cite: 6].

<code html>
<canvas id="myCanvas" width="200" height="200"></canvas>
</code>

==== Beispiel: Zeichnen per JavaScript ====
<code javascript>
// Zugriff auf die Zeichenfläche
var my_canvas = document.getElementById("myCanvas").getContext("2d");

// Gelben Kreis zeichnen
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, 0, (Math.PI / 180) * 360, false);
my_canvas.strokeStyle = "black"; // Schwarzer Rand
my_canvas.lineWidth = 3;       // 3 Pixel Randbreite
my_canvas.fillStyle = "yellow";  // Gelbe Füllung
my_canvas.stroke();             // Umriss zeichnen
my_canvas.fill();               // Füllung anwenden
my_canvas.closePath();
</code>