Multimediale Inhalte einbinden

Videos

Um Videos auf einer Seite einzubinden, gibt es verschiedene Möglichkeiten. Heutezutage bindet man oft Videos von anderen Quellen (wie YouTube) ein. Wie so etwas funktioniert, sehen wir uns aber an anderer stelle an. Hier gehen wir davon aus, dass ein Video bei uns selbst auf dem Server liegt. D.h. die Videodatei liegt uns in einem Ordner vor. Wir sollten Mediendateien - so wie Bilder - in einen eigenen Ornder ablegen, um Ordnung zu halten.

Wir wollen nun die Videodatei SampleVideo.mp4 einbinden, die sich im Ordner Medien/ befindet. Dafür gibt es - ähnlich wie für Bilder - einen eigenen Befehl:

Darstellung im Browser:

Übungsaufgabe

Untersuche, was die zusätzlichen Optionen controls, autoplay und loop bewirken.
Erkläre auch, was die Angabe poster="../Bilder/VideoTitelbild.PNG" bedeutet.

Audiodateien

Für Audiodateien gibt es einen Befehl, der im Grunde so wie der Befehl für Videos funktioniert:

Darstellung im Browser:

Erfahrungsgemäß werden Musikdateien aber (gerade in Schülerprojekten) recht selten eingebunden. Ungefragt Hintergrundmusik zu starten ist übrigens eine ganz schlechte Idee. Damit kann man einen Besucher der Seite dazu verleiten, sie sofort wieder zu schließen, weil die Musik nervt.

Flashanimationen

Für Flashanimationen gibt es leider keinen eigenen Befehl. Stattdessen müssen wir hier das sehr allgmeine Tag <Object> </Object> zum Einbinden besonderer Elemente verwenden.
Normalerweise kann man in diesem Tag mit dem Attribut type angeben, dass man eine Flashanimation einbinden möchte und danach die Größe und die Datei angeben. Allerdings kann es passieren, dass ein Browser diese Angabe nicht versteht oder aber Flashanimationen nicht unterstützt. Für solche Fälle kann man dann zum Beispiel einen Alternativtext eingeben:

So sieht die Darstellung im Browser aus. Betrachte dieses Beispiel ruhig einmal in verschiedenen Browsern!

Statt den Alternativtext zu schreiben kann man aber auch noch einen zweiten Versuch starten. Einige Browser verstehen nur eine andere Angabe der Attribute wie etwa zur Angabe des Dateinamens. Diese Art der Angabe können wir anstelle des Alternativtexts machen, um so möglichst viele Browser mit dem passenden HTML-Code zu bedienen:

Darstellung im Browser:

Übungsaufgabe

Erstelle eine Einbettung einer Deiner früheren Flashanimationen in einer Deiner HTML-Seiten. Verwende dabei die oben beschriebene doppelte Angabe der Attribute, um sicherzustellen, dass die Einbindung in möglichst vielen Browsern funktioniert.