HTML: Multimedia

Mittwoch 19. Februar 2020 von Torsten

Multimedia ist angesagt. In diesem Artikel zum Webdesign-Workshop 2020 geht es um Audiodateien und Videodateien…

HTML Audiodateien:

Mit HTML 5 ist es auch endlich möglich auf eine sehr elegante Art Multimedia-Inhalte in eine Webseite einzubinden. Völlig ohne Adobe Flash wird nachfolgend eine mp3-Datei in diese Webseite eingebunden…

Die mp3-Datei wird im HTML Quelltext so eingebunden:

<audio controls>

<source src=“Songtitel.mp3″ type=“audio/mpeg“>

Das Audio-Element von HTML 5 wird leider nicht vom genutzen Browser unterstützt.

</audio>

Dies ist der Grundaufbau, um eine Audiodatei per HTML5 in eine Webseite einzubinden. Die Kontroll- und Steuerelemente werden später noch intensiver behandelt.

Als „type“ werden folgende Angaben akzeptiert:

  • mp3 = audio/mpeg
  • ogg = audio/ogg
  • wav = audio/wav

Ein erweiterter Audioplayer wird so realisiert…:

<audio controls>

<source src=“Songtitel-1.mp3″ type=“audio/mpeg“>

<source src=“Songtitel-2.ogg“ type=“audio/ogg“>

<a href=“Songtitel-1.mp3″>Download mp3 Audiodatei</a>

</audio>

Dieser Audioplayer ist nun eine Erweiterung des ersten Audioplayers.

Wenn der Browser eine mp3 Datei abspielen kann, tut er das und ignoriert die verbleibenden Zeilen bis zum Ende des audio-Elements.

Wenn der Browser keine mp3 Datei abspielen kann, geht er weiter zur nächsten Zeile innerhalb des Elements und findet die ogg-Datei.

Wenn er auch die nicht abspielen kann, wird die Datei als mp3-Download angeboten.

HTML Videodatei:

Wenn mit HTML5 Audiodateien möglich sind (wie im vorherigen Kapitel beschrieben), dann sind natürlich auch Videodateien möglich.

<video width=“320″ height=“240″ controls>

<source src=“Videodatei-1.mp4″ type=“video/mp4″>

Das Video-Element von HTML 5 wird leider nicht vom genutzen Browser unterstützt.

</video>

Der Aufbau ist etwas anders als bei den Audiodateien. Mit „width“ und „height“ wird noch die Größe des Videos angegeben oder besser die Größe des „Videobildschirms“ auf der Webseite.

Als „type“ werden folgende Angaben akzeptiert:

  • mp3 = video/mp4
  • ogg = video/ogg
  • webm = video/webm

Dieser Beitrag wurde erstellt am Mittwoch 19. Februar 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben