06 | Multimedia im Browser und das Canvas-Element

In der sechsten (siebten) Wochen beschäftigen wir uns mit den multimedialen Fähigkeiten modernen Browser. Sie verschaffen sich einen Überblick über die HTML-Elemente zum Darstellung bzw. Wiedergabe von Audio- und Videodateien und lernen, diese programmatisch aus dem JavaScript-Code Ihrer Anwendung zu steuern. Mit dem Canvas-Element erhalten Sie die Möglichkeit Bildmaterial direkt im Browser zu bearbeiten. Der Canvas kann auch Grundlage komplexerer Anwendungen, z.B. 2D oder 3D Spiele sein.

Die Live-Sitzung zu dieser Lektion findet am 10. Juni ab 10:00 Uhr per Stream über Twitch.tv statt. Eine Beschreibung der dort vorgestellten Demo finden Sie hier.

Ziele

Inhalte zum Durcharbeiten

Weitere Materialien im Mozilla Developer Network

Übungsaufgaben

  1. Erstellen Sie einen einfachen video player: Über ein Text-Eingabefeld kann der Benutzer nacheinander verschiedene Video-URLs eingeben (z.B. URLs aus dieser Liste). Die Videos ergeben eine Playlist, deren Inhalte nacheinander in einem <video>-Element mit angezeigten Standard-Steuerelementen abgespielt wird. Nutzen Sie entsprechende Eigenschaften bzw. Events des <video>-Elements um das automatische Abspielen des jeweils nächsten Eintrags zu realisieren. Beispiel-Videos zum Testen der Anwendung finden Sie hier.

  2. Ergänzen Sie den erstellen video player mit eigenen Schaltflächen für das Starten und Stoppen des aktuellen Videos sowie das Auswählen des nächsten Eintrags der Playlist.

  3. Implementieren Sie eine einfache Web-Anwendung, die es dem Benutzer erlaubt, Zeichnungen zu erstellen. Erzeugen Sie ein HTML-Dokument und fügen Sie diesem ein <canvas>-Element hinzu. Fangen Sie die Mausinteraktion des Nutzers auf diesem Element ab (Vgl. mousemove) und übersetzen Sie die Mausbewegung in eine Zeichenoperation. Verwenden Sie die lineTo-Methode der Canvas-API bzw. um jeweils eine Linie zwischen der letzten bekannten und der aktuellen Position des Mauszeigers zu zeichnen.