IT-Kurs HTML-Grundlagen 014_Multimedia und eingebettete Inhalte

Multimedia und eingebettete Inhalte Verwendung von Audio- und Video-Tags in HTML5 Anwendung eingebetteter Inhalte wie Karten, eingebettete Webseiten usw.

Bilder

Bilder sind ein sehr wichtiger Medientyp, der die Benutzererfahrung verbessern und Informationen intuitiver und lebendiger übermitteln kann. In HTML verwenden wir das <img>-Tag zum Einfügen von Bildern. Das <img>-Tag ist ein selbstschließendes leeres Tag, das heißt, es hat kein End-Tag. Die Adresse des Bildes wird über das src-Attribut (source) des <img>-Tags angegeben.

Beispiel:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Bildbeschreibung">

Effekt:

Bildelemente können auch die folgenden Attribute enthalten:

• width: Gibt die Breite des Bildes an.
• height: Gibt die Höhe des Bildes an.
• align: Gibt die Ausrichtung des Bildes an.
• border: Gibt den Rahmen des Bildes an.
• hspace: Gibt den horizontalen Abstand zwischen dem Bild und den umgebenden Elementen an.
• vspace: Gibt den vertikalen Abstand zwischen dem Bild und den umgebenden Elementen an.
• ismap: Gibt an, ob das Bild ein Kartenbild ist.

Bildgröße festlegen

Wir können die Breite und Höhe des Bildes über die Attribute width und height des <img>-Tags festlegen. Die Werte dieser beiden Attribute können konkrete Pixelwerte oder Prozentangaben sein.

Beispiel:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Bildbeschreibung" width="100" height="100" align="center" border="1">

Effekt:

Alternativtext festlegen

Der Alternativtext (alt text) wird angezeigt, wenn das Bild nicht geladen werden kann. Er wird auch von Screenreadern verwendet, um den Inhalt des Bildes vorzulesen und Menschen mit Sehbehinderungen zu helfen, das Bild zu verstehen. Wir legen den Alternativtext über das alt-Attribut des <img>-Tags fest.

Beispiel:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="Dieser Text wird angezeigt, wenn das Bild nicht gefunden wird">

Effekt:

Bildlink

Bilder können auch als Hyperlinks verwendet werden. Wir müssen nur das <img>-Tag innerhalb des <a>-Tags platzieren, um einen Bildlink zu erstellen.

Beispiel:

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Bildbeschreibung" width="100" height="100" align="center" border="5">
3
</a>

Effekt:

[!Zusammenfassung]

• Die Attribute width und height legen die Breite und Höhe des Bildes fest. Die Werte dieser beiden Attribute können konkrete Pixelwerte oder Prozentangaben sein.
• Wenn sowohl die Breite als auch die Höhe des Bildes festgelegt werden und das Verhältnis dieser beiden Werte nicht mit dem Verhältnis des Bildes selbst übereinstimmt, kann das Bild gestreckt oder komprimiert werden, was zu Verzerrungen führt.
• Wenn ein Bildlink einen Rahmen hat, hat der Rahmen standardmäßig die gleiche Farbe wie der Hyperlink

Video

Das HTML-Videoelement wird verwendet, um Videos auf einer Webseite einzubetten. Das Tag des Videoelements ist <video>.

Beispiel:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Effekt:

Videoelemente können auch die folgenden Attribute enthalten:

• width: Gibt die Breite des Videos an.
• height: Gibt die Höhe des Videos an.
• poster: Gibt das Posterbild des Videos an.
• autoplay: Gibt an, ob das Video beim Laden automatisch abgespielt wird.
• loop: Gibt an, ob das Video in einer Schleife abgespielt wird.
• muted: Gibt an, ob das Video stumm geschaltet ist.
• preload: Gibt an, ob das Video beim Laden vorgeladen wird.

Beispiel:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Dieses Beispiel enthält ein Videoelement. Die URL der Videodatei ist auf mp4.mp4 eingestellt, die Breite auf 400 Pixel, die Höhe auf 300 Pixel, das Posterbild auf zhaojian-avatar.png, Autoplay auf true, Loop auf true, Muted auf true und Preload auf auto.

Effekt:

Eine sehr umfassende HTML-Video-Lösung (nicht empfohlen)

Das folgende Beispiel verwendet 4 verschiedene Videoformate. Das HTML 5 <video>-Element versucht, das Video in einem der Formate mp4, ogg oder webm abzuspielen. Wenn alle fehlschlagen, fällt es auf das <embed>-Element zurück.

Beispiel:

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!Zusammenfassung]

• Das <source>-Element bietet eine Backup-Option. Wenn der Browser dieses Format nicht unterstützt, versucht er, die im zweiten <source>-Element angegebene Videodatei abzuspielen.

Audio

Das <audio>-Element in HTML wird verwendet, um Audioinhalte auf einer Webseite einzubetten.

Beispiel:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

Effekt:

Audioelemente können auch die folgenden Attribute enthalten:

• controls: Gibt an, ob Audiosteuerelemente angezeigt werden. Der Standardwert ist true.
• autoplay: Gibt an, ob das Audio beim Laden automatisch abgespielt wird.
• loop: Gibt an, ob das Audio in einer Schleife abgespielt wird.
• muted: Gibt an, ob das Audio stumm geschaltet ist.
• preload: Gibt an, ob das Audio beim Laden vorgeladen wird.

Beispiel:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

Dieses Beispiel enthält ein <audio>-Element. Die URL der Audiodatei ist auf mp3.mp3 eingestellt, die Steuerelemente sind auf true eingestellt, Autoplay auf true, Loop auf true, Muted auf true und Preload auf auto.

Effekt:

embed-Element

Das embed-Element ist ein in HTML 4.01 eingeführtes Element. Es kann jede Art von Ressource einbetten, einschließlich Video, Audio, Bilder, Flash usw. Das embed-Element erfordert, dass der Browser ein bestimmtes Plugin unterstützt, um es anzuzeigen.

Beispiel:

1
<embed src="Ressourcen-URL" type="Ressourcentyp">

[!Zusammenfassung]

• HTML5 hat die <video>- und <audio>-Elemente eingeführt, um das <embed>-Element zu ersetzen.
• Das embed-Element kann jede Art von Ressource einbetten, während die <video>- und <audio>-Elemente nur Video- und Audioressourcen einbetten können.
• Das embed-Element erfordert, dass der Browser ein bestimmtes Plugin unterstützt, um es anzuzeigen, während die <video>- und <audio>-Elemente dies nicht benötigen.
• Das <embed>-Element kann weiterhin verwendet werden, wird aber nicht mehr empfohlen.

object-Element

Das object-Element ist ein in HTML 4.01 eingeführtes Element. Es kann jede Art von Ressource einbetten, einschließlich Video, Audio, Bilder, Flash usw. Das object-Element verwendet <param>-Elemente, um die Eigenschaften der Ressource anzugeben, wie z. B. Breite, Höhe, Hintergrundfarbe usw. der Ressource.

Beispiel:

1
<object data="Ressourcen-URL" type="Ressourcentyp">
2
  <param name="Attributname" value="Attributwert">
3
  ...
4
</object>

Spezifische Unterschiede zwischen object- und embed-Elementen:

[!Zusammenfassung]

• Wenn Sie jede Art von Ressource einbetten müssen und der Browser ein bestimmtes Plugin unterstützt, können Sie das object-Element verwenden.
• Wenn Sie nur einen bestimmten Ressourcentyp einbetten müssen und der Browser kein bestimmtes Plugin unterstützen muss, können Sie das embed-Element verwenden.
• Wenn Sie nur Video- oder Audioressourcen einbetten müssen, wird empfohlen, die <video>- oder <audio>-Elemente zu verwenden.
• Die <video>- und <audio>-Elemente benötigen keine Browserunterstützung für bestimmte Plugins und bieten umfangreichere Funktionen.

Frames

Das <iframe>-Element ist ein HTML-Tag zum Einbetten eines Dokuments in ein anderes Dokument. Es ermöglicht das Einbetten eines Dokuments in ein anderes Dokument und zeigt den Inhalt des eingebetteten Dokuments darin an. Dies wird häufig zum Einbetten anderer Webseiten, Videos, Karten usw. verwendet.

Das <iframe>-Element hat die folgenden Attribute:

• Das src-Attribut definiert die URL der einzubettenden Webseite oder des Dokuments.
• Das width-Attribut definiert die Breite des <iframe>-Elements.
• Das height-Attribut definiert die Höhe des <iframe>-Elements.
• Das frameborder-Attribut definiert, ob der Rahmen des <iframe>-Elements sichtbar ist.
• Das border-Attribut definiert die Rahmenbreite des <iframe>-Elements.
• Das framespacing-Attribut definiert den Abstand zwischen dem <iframe>-Element und seinem umgebenden Inhalt.
• Das marginwidth-Attribut definiert den linken und rechten Rand des <iframe>-Elements.
• Das marginheight-Attribut definiert den oberen und unteren Rand des <iframe>-Elements.
• Das scrolling-Attribut definiert, ob das <iframe>-Element das Scrollen erlaubt.
• Das name-Attribut definiert den Namen des <iframe>-Elements.
• Das id-Attribut definiert die ID des <iframe>-Elements.
• Das class-Attribut definiert die Klasse des <iframe>-Elements.

Beispiel:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>HTML iframe-Element</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>Dies ist ein iframe, das den Inhalt der Website zhaojian.net anzeigt.</p>
9
  </iframe>
10
</body>
11
</html>

Effekt: