Inhaltsverzeichnis
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
<iframe src="glossary.html" width="400" height="250"> Your browser does not support inline frames. Read the <a href="glossary.html">glossary</a>. </iframe>
- 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
<object data="picture.svg" type="image/svg+xml"> <img src="picture.png" alt="Ersatzbild"> </object>
- 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]:
<object type="video/quicktime" data="movies/hekboy.mov" width="320" height="256"> <param name="autostart" value="false"> <param name="controller" value="true"> </object>
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
<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>
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])*
<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>
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].
<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>
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].
<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>
*(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].
<canvas id="myCanvas" width="200" height="200"></canvas>
Beispiel: Zeichnen per 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();
