HTML
Medienelemente
Suche…
Parameter
| Attribut | Einzelheiten |
|---|---|
| Breite | Legt die Breite des Elements in Pixel fest. |
| Höhe | Legt die Höhe des Elements in Pixel fest. |
<source> | Definiert Ressourcen für Audio- oder Videodateien |
| Spur | Definiert die Textspur für Medienelemente |
| Kontrollen | Zeigt Steuerelemente an |
| automatisches Abspielen | Starten Sie die Wiedergabe der Medien automatisch |
| Schleife | Spielt die Medien in einem wiederholten Zyklus ab |
| stummgeschaltet | Spielt die Medien ohne Ton ab |
| Poster | Weist ein Bild zur Anzeige zu, bis ein Video geladen ist |
Bemerkungen
Unterstützung in Browsern
| Merkmal | Chrom | Firefox (Gecko) | Internet Explorer | Oper | Safari |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 3,0 | 3,5 (1.9.1) | 9,0 | 10,50 | 3.1 |
<audio> : PCM in WAVE | (Ja) | 3,5 (1.9.1) | Keine Unterstützung | 10,50 | 3.1 |
<audio> : Vorbis in WebM | (Ja) | 4,0 (2,0) | Keine Unterstützung | 10,60 | 3.1 |
<audio> : Streaming von Vorbis / Opus in WebM über MSE | ? | 36,0 | ? | ? | ? |
<audio> : Vorbis in Ogg | (Ja) | 3,5 (1.9.1) | Keine Unterstützung | 10,50 | Keine Unterstützung |
<audio> : MP3 | (Ja) | (Ja) | 9,0 | (Ja) | 3.1 |
<audio> : MP3 in MP4 | ? | ? | ? | ? | (Ja) |
<audio> : AAC in MP4 | (Ja) | (Ja) | 9,0 | (Ja) | 3.1 |
<audio> : Opus in Ogg | 27,0 | 15,0 (15,0) | ? | ? | ? |
<video> : VP8 und Vorbis in WebM | 6,0 | 4,0 (2,0) | 9,0 | 10,60 | 3.1 |
<video> : VP9 und Opus in WebM | 29,0 | 28,0 (28,0) | ? | (Ja) | ? |
<video> : Streaming von WebM über MSE | ? | 42,0 (42,0) | ? | ? | ? |
<video> : Theora und Vorbis in Ogg | (Ja) | 3,5 (1.9.1) | Keine Unterstützung | 10,50 | Keine Unterstützung |
<video> : H.264 und MP3 in MP4 | (Ja) | (Ja) | 9,0 | (Ja) | (Ja) |
<video> : H.264 und AAC in MP4 | (Ja) | (Ja) | 9,0 | (Ja) | 3.1 |
| irgendein anderes Format | Keine Unterstützung | Keine Unterstützung | Keine Unterstützung | Keine Unterstützung | 3.1 |
Verwenden von `
Verwenden Sie das HTML- oder <audio> -Element, um Video- / Audio-Inhalte in ein Dokument einzubetten. Das Video- / Audioelement enthält eine oder mehrere Video- / Audioquellen. Verwenden Sie zum Angeben einer Quelle entweder das Attribut src oder das Element <source> . Der Browser wählt den am besten geeigneten aus.
Audio-Tag-Beispiel:
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
Audio-Tag-Beispiel:
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
Audio
HTML5 bietet einen neuen Standard zum Einbetten einer Audiodatei in eine Webseite.
Sie können eine Audiodatei mit dem <audio> -Element in eine Seite einbetten:
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video
Sie können auch ein Video mit dem Element <video> in eine Webseite einbetten:
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Video-Header oder Hintergrund
Hinzufügen eines Videos, das automatisch in einer Schleife abgespielt wird und keine Steuerelemente oder Sounds enthält. Perfekt für einen Video-Header oder Hintergrund.
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
Dieses CSS bietet einen Fallback, wenn das Video nicht geladen werden kann. Beachten Sie, dass es empfohlen wird, das erste Bild des Videos als Poster video.jpg zu verwenden.
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}