Multimedia in HTML / Bilder

img picture source

Das Web stellt unterschiedliche Anforderungen an die Formate von Bildern, Fotos und Grafiken. Die Qualität soll hoch, aber die Dateigröße soll gering gehalten werden, um lange Ladezeiten zu vermeiden. Die drei geläufigsten Bildformate sind .jpg .png und .gif. Aber auch .svg oder .swf (z.B. Adobe Flash) können eingebunden werden.

img-Element

Mit dem img-Element werden Grafikdateien in HTML eingebunden. Das img-Tag ist ein inline-block Element (eine Mischung ais Inline und Block-Element) in einem Standalone-Tag und muss entsprechen notiert werden.

<!--in HTML-->
<img src="bildname.png" alt="Bildbeschreibung">
<!--in XHTML-->
<img src="bildname.png" alt="Bildbeschreibung" />

Folgende Attribute stehen zur Verfügung

  • alt: Bildbeschreibung (Pflicht)
  • crossorigin: regelt, ob und welche fremden Seiten per Skript direkt auf das Bild zugreifen können
  • height: Bildhöhe in Pixel oder Prozent
  • width: Bildbreite in Pixel oder Prozent
  • ismap: boolescher Wert für klickbare serverseitige Image Map
  • longdesc: URL einer Quelle, für ausführliche Beschreibung des Bildes
  • src: Bildname und Pfad
  • usemap: Name einer Image Map

picture-Element

Das picture-Element ist neu in HTML5 und wird von den meisten, modernen Browsern unterstützt. Mit dem picture-Element können Sie alternative Bildquellen für verschiedene Viewports (PC, Notebook, Tablet, Handy) angeben.

Ältere Browser können mit dem picture-Element nichts anfangen, aber es gibt ein JavaScript-Polyfill, das älteren Browsern auf die Beine hilft. Laden sie die Datei picturefill.js herunter und implementieren sie diese im Head-Bereich des Dokuments.

Picturefill Download

<script>
// Create Picture element
document.createElement( "picture" );
</script>
<script src="picturefill.js" async></script>

JavaScript muss dabei asynchron geladen wird um dem Ladevorgang und das rendern der restlichen Seiteninhalte nicht zu beeinflussen. Das picture-Elemente kennen außer Universalattribute keine weiteren Eigenschaften. (Zumindest weiss ich noch nichts davon!)

Viewport

Viewport beschreibt den aktuellen Anzeigenbereich des Browserfensters.
Der Benutzer betrachtet den sichtbaren Bereich eines HTML-Dokumentes (den body-Bereich) durch den Viewport. Im Vollbildmodus entspricht die Größe des Viewports (in etwa) der Größe des Browserfensters. Normalerweise ist der Viewport kleiner als das Browserfenster, weil diverse Symbolleisten, die Statusleiste, Scrollbalken, eine Sidebar und die Taskleiste des Betriebssystems Platz beanspruchen.

source-Element

Das picture-Element alleine kann nichts machen, sie müssen unbedingten eines oder mehrere source-Tags schreiben. Mit jedem source-Element definieren sie ein Bild mit unterschiedlichen Größen. Der jeweilige Browser ladet dann das für ihn passende Bild. Sollte der Browser das picture-Tag nicht kennen, bzw sollte kein media-Attribut zutreffen, steht ein Fallback zur Verfügung, welches nach den source-Elemente geschrieben wird.

<picture>
<source media="(min-width: 980px)" srcset="bild-980.jpg">
<source media="(min-width: 480px)" srcset="bild-480.jpg">
<!---Fallback--->
<img src="bild.jpg" alt="Bild">
</picture>

Folgende Attribute stehen zur Verfügung

  • srcset: Pfad und Dateiname für Bilddateien im picture-Element
  • media: für media queries z.B. (min-width: 1024px)
  • type: MIME-Typ
  • sizes: Größenangabe für unterschiedliche Seitenlayouts (nur Bilder)

Verweissensitive Grafiken

img map area

Mit verweissensitiven Grafiken können sie in einem Bild unterschiedlich viele Verweise einbinden. Sie müssen nur die Bildkoordinaten (x- und y-Werte) herausfinden, die sie Verweissensitiv gestalten möchten. Es gibt verschiedene Wege um an die Koordinaten zu kommen. In vielen HTML-Editoren ist ein Werkzeug zum Herausfinden der Koordinaten enthalten. Sie können auch mit einem Grafikprogramm die Koordinaten ermitteln.

map-Element

Mit dem öffnenden map-Tag leiten sie eine verweissensitive Grafik ein. Mit dem Attribut "name" definieren sie die Grafik, welche mit img-Tag vorab geschrieben wird. Achten sie auf das Attribut usemap im image.Tag. Definieren sie dort einen Namen (ohne Leer- bzw. Sonderzeichen) inklusive einer Raute vorab. Denselben Namen (ohne Raute) verwenden sie für das Attribut name im map-Tag.

<img src="Bildname.png" width="260" height="140" alt="Oesterreich" usemap="#oesterreich">
<map name="oesterreich">
<!--Koordinaten-->
</map>

Die Position der verweissensitiven Grafik wird durch das img-Element bestimmt. Das map-Element kann deshalb irgendwo im HTML-Code stehen, vorausgesetzt das img-Element wird zuerst geschrieben!

Folgende Attribute stehen zur Verfügung

  • name: Bildname aus usemap
  • Universalattribute

area-Element

Mit dem area-Tag definieren sie verweissensitive Bereiche. Dabei stehen drei Formen für Flächen zur Verfügung, die Koordinaten werden in Pixel angegeben.

  • Kreis (circle): Daür brauchen sie x und y-Werte des Kreismittelpunkts und den Radius (z.B. 228,43,8)
  • Rechteck (rect): Daür brauchen sie x und y-Werte der linken, oberen Ecke und x und y-Werte der rechten, unteren Ecke (z.B. 110, 100, 178, 122)
  • Polygon (poly): Daür brauchen sie x und y-Werte für jeden Eckpunkt des Vielecks (z.B. 173,22,240,21,249,50, 230, 76, 176, 65)

das area-Tad ist ein Standalone-Element und muss nicht geschlossen werden (Achtung bei XHTMI). Mit dem title-Attribut geben sie dem User einen Hinweis bei Mouseover.

<img src="Bildname.png" width="260" height="140" alt="Oesterreich" usemap="#oesterreich">
<map name="oesterreich">
<area shape="circle" coords="228,43,8" 
href="http://www.wien.gv.at" alt="Wien" title="Wien" target="_blank">> 
<area shape="poly" coords="173,22,240,21,249,50, 230, 76, 176, 65" 
href="http://www.noe.gv.at" alt="Niederösterreich" title="Niederösterreich" target="_blank"> 
<area shape="poly" coords="241, 43, 218, 78, 221, 102, 249, 61" 
href="http://www.burgenland.at" alt="Burgenland" title="Burgenland" target="_blank">
<area shape="rect" coords="110, 100, 178, 122" 
href="http://www.ktn.gv.at/27987_DE" alt="Kärnten" title="Kärnten" target="_blank">
</map>

Folgende Attribute stehen zur Verfügung

  • shape: circle, rect, poly
  • coords: Koordinaten
  • href: Verweis
  • alt: Bildbeschreibung
  • title: Hinweis bei Mouseover
  • target: Verweisziel (z.B. _blank)
  • download: Herunterladen beim Klicken
  • hreflang: Sprache der Ziel-URL
  • media: media query
  • rel: Beziehung zwischen Bild und URL (z.B. alternate)
  • type: media_type

Das Beispiel

Oesterreich Wien Niederösterreich Burgenland Kärnten

Videos

video source track

Während man früher für fast jeden Browser einen eigenen Code für die Wiedergabe von Videos schreiben musste, sollte das mit dem neuen video-Tag von HTML5 anders sein. Allerdings können ältere Browser (Internet Explorer) mit dem video-Element nichts anfangen und sie müssen daher eine Alternative (Fallback) anbieten. Moderne Browser bringen kein Flash-Plugin mehr mit, dafür spielen sie Video ohne Plugin in bestimmten Formaten ab. Mit dem source-Tag können sie im video-Element mehrere Videoformate schreiben, der Browser sucht sich dann das geeignete Format aus. Wenn sie möglichst alle Browser bedienen wollen, sollten sie jedes Video in drei Formaten bereitstellen:

PS: Bei meinen Tests hat der unten angeführte Code auf allen Browsern funktioniert. Meine Browser sind:
Microsoft Edge, IE 11, Opera, Firefox, Google-Chrome und alle erkennen mp4-Dateien.

video-Element

Mit dem video-Tag definieren sie ein Video ohne Plugins und Add-Ons. Zwischen dem öffnenden und schließenden video-Tag schreiben sie den Fallback (Text oder irgendeine Alternative). Das Attribut src enthält Videoname und Pfad.

<video src="Videos/Relativitaetstheorie.mp4" 
width="640" height="480" controls>
<!---Fallback--->
<p>Ihr Browser kann dieses Video nicht wiedergeben.</p>
</video>;

Das Beispiel


Quelle: youtube

Folgende Attribute stehen zur Verfügung

  • src: Videoname und Pfad
  • height: Höhe in Pixel
  • width: Breite in Pixel
  • controls: Blendet Control-Panel ein
  • autoplay: Video beginnt sofort mit dem Abspielen
  • buffered: die Zeitdauer, die im Browser-Catch zwischengespeichert wurde
  • muted: Stummschaltung
  • loop: Endlosschleife
  • preload: Ladeoptionen (auto, metadata oder none)
  • poster: Zeigt ein Vorschaubid an (bei längeren Ladezeiten)

source-Element

Wenn sie mehrere Videoformate bereitstellen möchten, verwenden sie das source-Tag im video-Element. Die Attribute kennen wir schon aus dem picture-Element. In der Regel definiert man die Quelle den Mime-Typ bzw ein Fallback.

<video width="100%" controls">
<source src="Videos/Relativitaetstheorie.mp4" type="video/mp4">
<source src="Videos/Relativitaetstheorie.ogv" type="video/ogg">
<source src="Videos/Relativitaetstheorie.webm" type="video/webm" />

<track src="subtitle_de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
<track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="Englisch">
<track src="specification.vtt" kind="descriptions">

<!--Fallback-->
<p>Ihr Browser kann dieses Video nicht wiedergeben.</p>
</video>

Folgende Attribute stehen zur Verfügung

  • src; Pfad und Dateiname
  • media: für media queries z.B. (min-width: 1024px)
  • type: MIME-Typ

track-Element

Für barrierefreies Web ist es wichtig, Videos mit Untertitel und Beschreibung zu verwenden. Für kleine Videos können sie das auch selber machen. Mit dem track-Tag im video-Element können sie solche, externe Text-Dateien einfügen. Verwenden sie dafür einen einfachen Texteditor und speichern sie die Datei mit der Endung .vtt. Schreiben sie darin den Untertitel wie folgt:

WEBVTT FILE

00:00:15.000 --> 00:00:30.000
Liebe Besucher meiner Webseiten
Das ist nur ein Test für Untertitel

00:00:31.000 --> 00:00:50.000
Einfach eine Textdatei mit der Endung .vtt
speichern und Untertitel schreiben!

Schreiben sie in der ersten Zeile WEBVTT gefolgt von einer Leerzeile.
Danach schreiben sie die Einblendzeit von -bis so wie im Script.
Danach der Text für den Untertitel.
Jetzt kommt wieder eine Leerzeile und wiederholen sie Einblendzeiten und Text sooft sie möchten.
In der Steuerungsleiste finden sie nun eine zusätzliche Schaltfläche mit der Beschriftung „CC“ für „closed captioning“. Ähnlich funktioniert auch das Bereitstellen von Beschreibungstext für Screenreader. Während normale Browser nur die Untertitel anzeigen, können Screenreader auch die Beschreibungen ausgeben.

Folgende Attribute stehen zur Verfügung

  • default: Standardwert
  • kind: Text-Typ
    • captions: Überschriften
    • chapters: Kapitel
    • descriptions: Video-Beschreibungen
    • metadata: Metadaten
    • subtitles: Untertitel
  • label: Sichtbare Auswahl
  • src: Dateiname und Pfad (.vtt-Format)
  • srclang: Sprache (z.B. de en)

Dieses Beispiel


Quelle: youtube

Audio

audio source

Das Verhalten vom audio-Element entspricht dem von Videos. Auch hier gibt es wieder drei unterstützte Audio-Formate (.mp3, .ogg, wav). Mit dem source-Tag können sie den Browsern wieder unterschiedliche Audio-Formate anbieten.

Ein einfaches Beispiel

<audio src="Oesterreich.mp3" type="audio/mpeg" controls>
<!--Fallback-->
<p>Ihr Browser kann dieses Audio nicht wiedergeben.</p>
</audio>
</audio>

Folgende Attribute stehen zur Verfügung

source-Element

Wenn sie mehrere Audio bereitstellen möchten, verwenden sie das source-Tag im audio-Element. In der Regel definiert man die Quelle den Mime-Typ bzw ein Fallback.

<audio controls>
<source src="Oesterreich.ogg" type="audio/ogg">
<source src="Oesterreich.mp3" type="audio/mpeg">

<!--Fallback-->
<p>Ihr Browser kann dieses Audio nicht wiedergeben.</p>
</audio>

Folgende Attribute stehen zur Verfügung

  • src; Pfad und Dateiname
  • media: für media queries z.B. (min-width: 1024px)
  • type: MIME-Typ

Dieses Beispiel

Untertitel (Bildbeschreibung)

figure figcaption

Seit HTML5 gibt es die Elemente figure und figcaption. Das figure-Element dient als semantisches Elternelement für eine zum Seiteninhalt gehörende Abbildung, aber auch Multimedia, Tabellen oder Textstellen wie z.B. Zitate. Das figcaption-Element beinhaltet die jeweilige Beschreibung. Beide Elemente gehören zu den Block-Elementen.

img-Element mit figure und figcaption

Das figcaption-Element mit Bild und figure.

<figure>
<img src="bildname1.png" alt="Bildbeschreibung">
<figcaption>
Eine Bildbeschreibung
</figcaption>
</figure>

Mehrere Elemente mit figure

Das figure-Element kann auch geschachtelt werden.

<figure>
  <figure>
  <img src="bildname1.png" alt="Bildbeschreibung">
  <figcaption>
  Eine Bildbeschreibung
  </figcaption>
  </figure>
  <figure>
  <img src="bildname2.png" alt="Bildbeschreibung">
  <figcaption>
  Eine zweite Bildbeschreibung
  </figcaption>
  </figure>
<figcaption>
Eine Gesamtübersicht
</figcaption>
</figure>

Für weitere Informationen über Multimedia schauen sie sich folgende Scripts an!

w3schools.com

wiki.selfhtml.org