Grafiken und Multimedia in HTML5

Für eingebundene Inhalte (embedded Content) gibt es folgende Elemente:

audio
Einbindung einer Audiodatei

  • autoplay="autoplay"
  • controls="controls" ergänzt eine Bedienungsleiste in der Browseranzeige
canvas
Bitmap-Leinwand für Skript-Grafik und Interaktion
embed
Einbindung einer anderen Datei
iframe
Einbindung einer anderen Datei
img (image)
Pixelgrafik (gif,jpg,png, in HTML5 auch svg)

  • src="URL"
  • alt="Alternativtext" (der Alternativtext wird nur angezeigt, wenn das Bild nicht geladen werden kann)
object
Einbindung einer anderen Datei
param
Parameter für ein object
source
Quelle einer Medienressource wie einer Audio- oder Videodatei

  • src="URL"
  • type="MIME-Typ"
video
Einbindung einer Videodatei

  • controls="controls" ergänzt eine Bedienungsleiste in der Browseranzeige
  • preload="preload" weist den Browser an, das Video mit dem Laden des Dokumentes ebenfalls herunterzuladen (nicht erst beim Klick auf Start)

Anwendungsbeispiele

<audio autoplay="autoplay" controls="controls">
  <source src="audio.mp3" type="?">
  <source src="audio.odd" type="?">
  <!-- Downloadlink, falls der Browser die Datei nicht wiedergeben kann -->
  <a href="audio.mp3">Download</a>
</audio>
<video controls="controls" preload="preload">
  <source src="video.mp4" type="video/mp4">
</video>

Direktes Einbinden von MathML mit dem math-Element

math ist das Wurzelelement von MathML-Dokumenten. In HTML 5 ist es möglich, innerhalb des math-Elementen MathML-Elemente zu verwenden.

Die wichtigsten MathML-Elemente sind dabei:

  • mi (identifier) für Variablen, Funktionsnamen und Konstanten
  • mn (number) für Zahlen
  • mo (operator) für Operatoren (wie + etc.)
  • mrow
  • mfrac a b (fraction) für Brüche
    ab

    ,wobei a und b mi– oder mn-Elemente sind

  • msub
  • msup
  • msqrt für eine Quadratwurzel
  • mroot base index für die n-te Wurzel

Direktes Einbinden von SVG mit dem svg-Element

Innerhalb von svg kann in HTML 5 SVG-Quelltext direkt eingebunden werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.