HTML <source> mediaAttribut
Beispiele
Verwendung des media-Attributs:
<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Selbst ausprobieren »
Browser-Unterstützung
Fast alle gängigen Browser unterstützen das media-Attribut nicht.
Definition und Verwendung
Das media-Attribut gibt den Typ der Medienressource an (für welches Medium/Gerät die Datei optimiert ist).
Der Browser verwendet dieses Attribut, um festzustellen, ob er die Datei abspielen kann. Wenn nicht, kann er beschließen, die Datei nicht herunterzuladen.
Hinweis:Dieses Attribut kann mehrere Werte annehmen.
Unterschiede zwischen HTML 4.01 und HTML5
Das <source>-Tag ist neu in HTML5.
Syntax
<source media="value">
Mögliche Operatoren
| Wert | Beschreibung |
|---|---|
| und | Definiert einen AND-Operator. |
| not | Definiert einen NOT-Operator. |
| , | Definiert einen OR-Operator. |
Geräte
| Wert | Beschreibung |
|---|---|
| all | Standard. Gilt für alle Geräte. |
| aural | Sprachsynthesizer. |
| braille | Braille-Rückmeldegeräte. |
| handheld | Handheld-Geräte (kleine Bildschirme, begrenzte Bandbreite). |
| projection | Projektoren. |
| Druckvorschau-Modus / gedruckte Seiten. | |
| Bildschirm | Computerbildschirme. |
| tty | Fernschreiber und ähnliche Medien mit einem Raster aus Zeichen fester Breite. |
| tv | Fernsehähnliche Geräte (niedrige Auflösung, eingeschränkte Scrollfähigkeit). |
Wert
| Wert | Beschreibung |
|---|---|
| width | Definiert die Breite des Zielanzeigebereichs. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (min-width:500px)" |
| height | Definiert die Höhe des Zielanzeigebereichs. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (max-height:700px)" |
| device-width | Definiert die Breite der Zielanzeige/des Zielpapiers. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-width:500px)" |
| device-height | Definiert die Höhe der Zielanzeige/des Zielpapiers. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-height:500px)" |
| orientation | Definiert die Ausrichtung der Zielanzeige/des Zielpapiers. Mögliche Werte: "portrait" oder "landscape". Beispiel: media="all and (orientation: landscape)" |
| aspect-ratio | Definiert das Breite/Höhe-Verhältnis des Zielanzeigebereichs. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Definiert das device-width/device-height-Verhältnis der Zielanzeige/des Zielpapiers. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (aspect-ratio:16/9)" |
| color | Definiert die Bits/Farbe des Zieldisplays. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (color:3)" |
| color-index | Definiert die Anzahl der Farben, die das Zieldisplay verarbeiten kann. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (min-color-index:256)" |
| monochrome | Definiert die Bits/Pixel in einem monochromen Framebuffer. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (monochrome:2)" |
| Auflösung | Definiert die Pixeldichte des Zieldisplays/des Papiers (dpi oder dpcm). Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="print and (resolution:300dpi)" |
| scan | Definiert die Abtastmethode eines TV-Displays. Mögliche Werte: "progressive" und "interlace". Beispiel: media="tv and (scan:interlace)" |
| grid | Definiert, ob das Ausgabegerät ein Raster oder eine Bitmap ist. Mögliche Werte: "1" für Gitter, andernfalls "0". Beispiel: media="handheld and (grid:1)" |
HTML <source>-Tag Andere Erweiterungen