[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 11: Ein Video einfügen:

Hier lernst du wie man in einer Webseite ein eigenes Video einfügt - mit dem so genannten video - tag.
Der Code:
<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>
<video width="320" height="240" controls="controls">
  <source src="MeinFilm.mp4" type="video/mp4" />
  <source src="MeinFilm.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
Beispiel - so siehts aus - es wird mit Hilfe des Video - tags ein Video eingebunden. Da nicht jeder Browser jedes Videoformat unterstützt muss das Video in mehreren Formaten angeboten werden... Je nach Browser kann der Video - Player unterschiedlich ausschauen - probiere diese Webseite einmal mit unterschiedlichen Browsern aus...
[Beispiel zur Lektion]


Tipp: Man kann ein Video mit Hilfe von bestimmter Software in andere Formate umwandeln (konvertieren) - z.B. mit der kostenlosen Software xmedia-recode ...
* hier kommst zur Webseite von xmedia-recode
* hier kannst du dir bei Youtube Videos von mir zum Umgang mit xmedia-recode betrachten

Augabenstellung:
1. Mit welchem HTML - Tag kann ein Video in eine Webseite eingebunden werden?
2. Erkläre mit eigenen Worten was man unter einem Videoformat versteht! Zur Beantwortung der Frage kannst du natürlich auch im Internet recherchieren!
3. Welche 2 verschiedenen Videoformate werden im obigen Listing in die Webseite eingebunden? Warum sind gerade diese 2 Videoformate besonders gegeignet um in eine HTML5 - Webseite eingebunden zu werden? Zur Beantwortung der Frage kannst du natürlich auch im Internet recherchieren!
4. Erzeuge in einem Editor ein HTML5 - Grundgerüst! Lade von der URL http://archive.org/ jeweils 1 Ogg - Video und 1 MPEG4 - Video herunter - KEINES der Videos darf größer als 5.0 MB groß sein!!! Diese beiden Videos sind mit dem entsprechenden Tag in die Webseite einzubinden! Speichere diese Datei als 011.html. Wähle für diese Webseite mit dem entsprechenden Tag einen aussagekräftigen Titel!