Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)

HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)

Wie sich Videos einbinden lassen, habt ihr gesehen. Nun sind Videos natürlich nicht alles, was man seinen Besuchern auf der Webseite präsentieren kann. In diesem Video-Training wird daher beschrieben, welche Optionen euch HTML5 hinsichtlich des Einbindens von Audio-Dateien und Flash-Filmen bietet. Denn auch diese Dinge muss man hin und wieder mal auf seiner Seite anzeigen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Audio-Dateien könnt ihr in HTML5 ähnlich einfach wie Videos einbinden. HTML5 stellt dafür mit audio ein eigenes Element zur Verfügung.
<audio src="song.mp3">
   Ihr Browser unterstützt das audio-Element nicht.
</audio>

Dem audio-Element wird über das src-Attribut der Name der abzuspielenden Datei zugewiesen. Abgespielt wird die Datei dadurch allerdings noch nicht. Dazu werden Steuerungselemente benötigt.

Wollt ihr Steuerungselemente einblenden, weist ihr dem audio-Element das Attribut controls zu.
<audio src="song.mp3" controls>
   Ihr Browser unterstützt das audio-Element nicht.
</audio>

Im Browser sollte das folgendermaßen aussehen:

Bilder



 
Fehlt controls, ist das über audio eingebundene Element nicht zu sehen. Sinnvoll ist das Weglassen des Attributs, wenn man per JavaScript eigene Steuerungselemente einfügen will.

Auch der Einsatz des audio-Elements ist leider nicht problemlos möglich. Schuld daran sind wieder einmal die Browser, die jeweils unterschiedliche Formate unterstützen. Die folgende Tabelle liefert euch den aktuellen Stand diesbezüglich.
Browser
MP3

OGG

WAV

AU/SND

AIF

Firefox

nein

ja

ja

nein

nein

Safari

ja

nein

ja

ja

ja

Chrome

ja

ja

nein

nein

nein

Opera

nein

ja

ja

ja

nein

Was also tun? Auch das audio-Element bietet euch die Möglichkeit, zusätzliche source-Elemente zu definieren. Diesen Elementen weist man dann die verschiedenen Formate für die jeweiligen Browser zu. Ein Beispiel:
<audio controls>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Den src-Attributen werden die jeweiligen Dateien, die dann in den unterschiedlichen Formaten vorliegen, zugewiesen.

Neben controls gibt es für das audio-Element weitere Attribute. Eines davon ist autoplay.
<audio controls autoplay>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Wird das Attribut gesetzt, startet die Wiedergabe der Audiodatei automatisch, sobald sie geladen wurde. Dieses Attribut setzt man normalerweise nicht, da man den Besuchern die Entscheidung, wann eine Audiodatei abgespielt wird, selbst überlassen sollte.

 
Interessant ist darüber hinaus auch das loop-Attribut. Dieses Attribut sorgt dafür, dass die Datei in einer Schleife abgespielt wird.

Wie beim Einbinden von Videos gibt es auch für Audio-Dateien die beiden Attribute type und media. Ihr könnt also auch hier die entsprechenden MIME-Typen und Codecs angeben. Aufgeführt sind in der HTML5-Spezifikation die folgenden typischen Angaben für das type-Attribut:

type='audio/ogg; codecs=vorbis'
type='audio/ogg; codecs=speex'
type='audio/ogg; codecs=flac'

Beachtet, dass die beiden Attribute ausschließlich beim source-, nicht aber beim audio-Element verwendet werden dürfen.


Flash & Co. einbinden

Flash-Filme ließen sich in früheren HTML-Versionen durch eine Kombination aus embed und object einbinden. Die daraus resultierende – übrigens sehr unschöne – Syntax sah dann beispielsweise so aus:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

 
Das ist der klassische Weg über das object- und embed-Element, den es in dieser Form schon sehr lange in HTML gibt.

Bilder



Allerdings bedeutet hier "klassisch" nicht, dass diese Variante in der Vergangenheit vom W3C abgesegnet gewesen ist. Denn in HTML 4 wurde das object-Element favorisiert, das so auch vom Internet Explorer korrekt interpretiert wurde. Anders der Netscape Navigator. Der setzte auf das embed-Element. Diese unterschiedliche Interpretation machte die Kombination aus object- und embed-Element nötig.

HTML5 stellt zum Einbinden von aktiven Inhalten nun ganz offiziell die beiden Elemente object und embed zur Verfügung.

embed ist ein Container, der für die Anzeige von Nicht-HTML-Inhalten gedacht ist, die nicht durch andere Elemente wie img, video, audio usw. abgedeckt sind. Um die eingebundenen Inhalte wiederzugeben, werden normalerweise Browser-Plug-ins benötigt.

 
Mittels embed lassen sich nun zum Beispiel Flash-Filme standardkonform einbinden. Hier ein Beispiel dafür, wie so etwas aussehen kann:
<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&amp;hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

Dem embed-Element können verschiedene Attribute zugewiesen werden. Am wichtigsten ist dabei natürlich wieder das src-Attribut. Denn darüber gibt man letztendlich die einzubindende Datei an. Über das type-Attribut wird der MIME-Typ angegeben.

Im Fall von Flash lautet dieser application/x-shockwave-flash. Wollt ihr hingegen eine LaTeX-Datei einbinden, notiert ihr application/x-latex. Breite und Höhe der eingebundenen Datei werden über width und height geregelt.

Bilder



 
Es gibt übrigens noch weitere Attribute, die dann aber nicht offiziell zu HTML5 gehören. Sie erlauben aber die Steuerung des verwendeten Plug-ins. So wurde im vorherigen Beispiel über die beiden "Flash-Attribute" allowscriptaccess und allowfullscreen festgelegt, dass ein Skript-Zugriff und Vollbildmodus möglich ist. Ebenso gibt es aber auch das quality-Attribut, über das sich die Qualität des Flash-Films bestimmen lässt.
<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

Das object-Element

Das object-Element dient ähnlich wie embed als Container für Inhalte. Im Gegensatz zu embed kennt object jedoch drei verschiedene Inhaltsmodelle. Erkennt der Browser, dass es sich um eine direkt anzeigbare Grafik handelt, verhält er sich so, als ob es sich um ein img-Element handelt. Wenn es sich bei dem referenzierten Objekt um einen Webinhalt handelt, wird dieser innerhalb eines iFrames angezeigt. (Mehr zu den iFrames dann übrigens im weiteren Verlauf dieser Reihe). Bei anderen Inhalten verhält sich object wie embed.

Das folgende Beispiel zeigt die Einbindung eines Flash-Films über das object-Element.
<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&amp;hl=de_DE&amp;rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       In Ihrem Browser ist kein Flash-Plug-in vorhanden.
    </p>
 </object>

 
Stellt sich abschließend natürlich die Frage, ob man nun object oder embed einsetzen sollte. Auf den ersten Blick scheinen die beiden Elemente nahezu identisch zu sein. Und in der Tat kann das object-Element alles, was das embed-Element auch kann.

Bilder



Für das Einbinden von Inhalten – außer eben Bildern – sollte normalerweise auf das object-Element zurückgegriffen werden. Dieses Element ermöglicht nämlich das Angeben alternativer Inhalte, die angezeigt werden, wenn das eingebundene Element nicht geladen werden kann.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:30

vielen Dank!

Portrait von GabiD7
  • 22.06.2015 - 15:53

Danke für diese gut gemachte, ausführliche Reihe!

Portrait von ZainaPhoto
  • 11.04.2015 - 13:24

Vielen Dank für das Video!

LG Zaina

Portrait von Monti7
  • 24.03.2015 - 09:53

Herzlichen Dank für die Infos! Super Tutorial :)

Portrait von fe_web
  • 03.02.2015 - 11:29

Gut erklärt -Danke für das Tutorial

Portrait von Kundentest
  • 16.01.2015 - 10:14

Herzlichen Dank für das Tutorial.

Portrait von pallasathena
Portrait von Schulli
  • 16.01.2015 - 09:16

Na vielen Dank für einen weiteren Teil dieser tollen Reihe!

Portrait von der_fou
  • 16.01.2015 - 09:09

Tolle tutorial-Reihe. Vielen Dank!!

Portrait von MARIA52
  • 16.01.2015 - 09:04

Vielen Dank für das Tutorial.

Portrait von BOPsWelt
  • 16.01.2015 - 07:08

Danke für einen weiteren Teil der Reihe, wirklich sehr hilfreich.

Portrait von Caesarion2004
  • 16.01.2015 - 07:06

Vielen Dank für das interessante Tutorial.

Portrait von MicroSmurf
  • 20.12.2014 - 20:13

Sehr interessant. Vielen Dank.

Portrait von MARIA52
  • 20.12.2014 - 14:46

Dankeschön für das Video.

Portrait von Kundentest
  • 20.12.2014 - 12:36

Herzlichen Dank für das Video.

Portrait von Domingo
  • 20.12.2014 - 12:25

Klasse Tutorial. Danke

Portrait von renate_C
  • 20.12.2014 - 12:13

Vielen Dank für den weiteren sehr informativen Teil.

Portrait von suzana
  • 20.12.2014 - 11:54

Vielen Danke für das Video!

Portrait von Caesarion2004
  • 20.12.2014 - 11:32

Vielen Dank für den weiteren interessanten und informativen Teil der Reihe.

x
×
×