Medienformate Klausuraufgaben

Autoren

• Kai Dippel
• Aysenur Cavusoglu
• Christian Grevenstein

Inhalt

• Audio
  • Leicht
  • Mittel
  • Schwer
• Bilder
  • Leicht
  • Mittel
  • Schwer
• Video
  • Leicht
  • Mittel
  • Schwer

---

Video

Leicht

#####Erklären Sie folgende Parameter, die in HTML5 verwendet werden.

width & height =

src =

type =

controls =

autoplay =

loop =

Lösung:

width & height = geben die Breite und Höhe des Videofensters an. Es wird empfohlen die Werte zu setzen, damit der Platz beim laden der Seite reserviert wird.

src = ist die Quelladresse der Video Datei.

type = der MIME Type

controls = Schaltet die Kontrolloberfläche des Players ein. Ohne diese hat man nur durch einen Rechtsklick Zugriff auf Stop/Play u.s.w.

autoplay = damit wird das Video automatisch beim laden der Seite abgespielt.

loop = das Video wird in einer Endlosschleife abgespielt.

Mittel

#####Vervollständigen sie den folgenden Code sinnvoll:

<video controls ......>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="......">
    <img ......="bild.jpg" ......="Beschreibung">
    <p>Dieser Browser unterstützt kein HTML5-Video!</p>
</video>

Lösung:

<video controls autoplay> <!-- Sinnvoll wären auch andere Attribute -->
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <img src="bild.jpg" alt="Beschreibung">
    <p>Dieser Browser unterstützt kein HTML5-Video!</p>
</video>

Schwer

#####Gegeben ist ein Video namens "Flohzirkus", es liegt in drei verschiedenen Formaten vor:

1. Flohzirkus.ogg
2. Flohzirkus.mp4
3. Flohzirkus.webm

#####Wie würde die Einbindung des Videos in HTML5 aussehen?

Binden Sie das Video so ein, dass möglichst die drei verbreitesten Browser(Safari,Firefox,Chrome)das Video abspielen können. Das Video soll 300px breit und 200 px hoch sein. Das Video soll auch die üblichen Steuerfunktionen wie pause/play und eine Fortschrittsleiste haben. Das Video soll automatisch starten wenn es geladen wurde.

HINWEIS:Die drei Videoformate befinden sich im selben Verzeichnis wie die index.html.

Lösung

<video width="300" height="200" controls  autoplay>
    <source src="Flohzirkus.webm" type="video/webm">
    <source src="Flohzirkus.mp4" type="video/mp4">
    <source src="Flohzirkus.ogg" type="video/ogg">
</video>

---

Musik

Leicht

#####Bitte geben Sie für folgende Abkürzungen an, wie sie ausgeschrieben lauten?#####

• mp3 ______
• WAV ______

Lösung

• MP3 (Moving Pictures Experts Group Layer 3)
• WAV (Windows Audio Format)

Mittel

#####Nennen Sie zwei verschiedene Vorteile eines OGG Vorbis Formates? * *

Lösung

• sehr gute Software-Unterstützung
• Es ist nicht patentiert, Hersteller zahlen keine Lizenzgebühren

Schwer

#####Wie werden audio Datein in mehreren Dateiformaten eingebettet? Bitte stellen Sie eine Beispiel Programmcode dar

Lösung

<audio>
   <source src="DATEINAME.mp3" type=“audio/mp3“>
   <source src="DATEINAME.ogg" type=“audio/ogg“>
</audio>

---

Bilder

Leicht

#####Bitte nennen sie die ausgeschriebene Bedeutung der folgenden Abkürzungen

• GIF ______________________________________
• JPEG ______________________________________
• PNG ______________________________________

Lösung:

• GIF: Graphics Interchange Format
• JPEG: Joint Photographic Experts Group
• PNG: Portable Network Graphics

Mittel

#####Nennen sie 3 Vorteile von GIF

• 1 _______________________________

• 2 _______________________________

• 3 _______________________________

Lösung

• verlustfreie Kompression
• Transparenz möglich
• Animation möglich

Schwer

Gegeben ist ein Bild namens "test.png"

#####Wie würde die Einbindung des Bildes in HTML aussehen?

• Das Bild soll 640px breit und 480 px hoch sein.
• Der alternative Text des Bildes soll "Testbild" lauten

HINWEIS:Das Bild befindet sich im selben Verzeichnis wie die index.html.

Antwort: <img src="test.png" alt="Testbild" width="640" height="480">