E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Video einbinden
  2. Musik einbinden

Video einbinden

Ab HTML 5 gibt es die Möglichkeit, Video oder Musik einzubinden. Mit den Tags <video> und </video> kann man ein Video einbinden. Sie können zwischen die Video-Tags einen Text schreiben, der angezeigt wird, wenn das Video nicht abgespielt werden kann. Für die Videos benötigen Sie entweder das Format Ogg Theora oder h.264. Leider unterstützt nicht jeder Browser diese Funktion. Möglich ist es das Gleiche Video, in 2 Dateiformaten, einzuprogrammieren. Angezeigt wird trotzdem nur eines. Dabei muss jedoch anders vorgegangen werden. Das Format h.264 (also mp4) hat leider lizenzrechtliche Nachteile und dadurch können in den nächsten Jahren Kosten auf Sie zukommen. Deshalb verwenden wir in unserem Beispiel ausschließlich Ogg Theora. In den Video-Tag können nun verschieden Attributen verwendet werden:

<video src="/Video/Testvideo_wmv.ogg" width="640px" height="360px" poster="/Bilder/Startseite_rung.png" autobuffer autoplay controls >
  <p>Das Video kann nicht angezeigt werden, da Ihr Browser dies nicht unterstützt!</p>
</video>
Anzeigebeispiel
Anzeigebeispiel



Musik einbinden

Mit den Funktionen von HTML 5 ist es nicht nur möglich Videos einzubinden, sondern auch Musik. Für Musik-Dateien gibt es 3 verschiedene Möglichkeiten Ogg Vorbis, MP3 und Wav. Da wir zurzeit keine Informationen über die Rechtsgrundlage vorliegen haben, verwenden wir in unseren Beispielen ausschließlich Ogg Vorbis, da diese Datei-Art auf jeden Fall "frei" ist. Ihren kompletten Code (alles was die Musik betrifft) müssen Sie zwischen die Tags <audio> und </audio> bringen. Als Attribute für den audio-Tag können Sie folgendes verwenden:

Hier noch ein Tipp: Wenn Sie controls="controls" nicht verwenden, dann benötigen Sie das autoplay-Attribut, da sonst die Musik nie erscheint. Das war es nun mit den musik-Tags, nun benötigen Sie noch die source-Tags (<source />) um die Quelle und Art der Datei anzugeben. In dem source-Tag benötigen Sie folgende Attribute: src (Quelle der Musik) und das type-Attribut (MIME-Typ der Musik). Den source-Tag können Sie mehrmals verwenden, wenn Sie sicher gehen wollen, dass die Musik mit jedem Browser funktioniert. Ogg Vorbis wird zurzeit nur von Firefox, Opera und Chrome unterstützt. Hier die Übersicht der MIME-Typen: audio/ogg (Ogg Vorbis), audio/mpeg (MP3), audio/x-wav (Wav). Des Weiteren können Sie zwischen die Audio-Tags einen Text schreiben. Dieser wird angezeigt wenn der Browser dieses Format nicht unterstützt.

<audio controls loop autoplay >
 <source src="/Musik/AeBeK.ogg" type="audio/ogg" />
 <p>Die Musik kann nicht abgespielt werden, da Ihr Browser dies nicht unterstützt!</p>
</audio>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de