Verwende das HTML-Element <video>, um einen Videoplayer zu entwerfen.
Nutze anschliessend Javascript, um die Bedienelemente mit Funktionalität zu versehen.
Die Anleitung unter MDN: Video und Audio APIs (englisch) lässt sich gut dafür verwenden. Für die Aufgabe ist nicht nötig, Seeking oder sonstige, über einfache Play/Pause/Skip Funktionalität hinausgehende, Aspekte umzusetzen.
Wähle in Javascript das Video-Element aus:
const videoEle = document.querySelector('video');Verwende die vordefinierten Funktionen um das Video zu starten oder zu pausieren:
videoEle.play();
videoEle.pause();Das ganze soll beim Klick auf eines deiner Bedienelemente passieren:
const playMedia = function () {
videoEle.play();
}
const playButton = document.querySelector(".playbutton");
playButton.addEventListener("click", playMedia);Gestalte den Player mit CSS, ansprechend und funktional. Er sollte direkt responsive gehalten sein, so dass die Größe des Anzeigefensters keine Rolle für die Benutzbarkeit spielt.
Bonusaufgabe:
- Gestalte Grafiken für die Bedienelemente und binde sie statt der Texte, oder ergänzend zu ihnen, ein.
- Informiere dich über die weiteren vordefinierten Funktionalitäten des
<video>-Elements und verbessere deinen Player, zB. mit Seeking, Mute, oder weiteren Funktionen. Als Vorlage können zB. Youtube, Vimeo, oder Twitch dienen. - Auf die gleiche Weise lässt sich auch ein Audioplayer mit dem
<audio>-Element umsetzen.
Tip: Video-Hosting in Dropbox
Wenn man schnell mal ein paar Videos in Dropbox hosten möchte, kann man das <video> Element auch direkt dort hin zeigen lassen. Dafür generiert man einen normalen "Share" Link und hängt statt ?dl=0 einfach ?raw=1 ans Ende.
<video src="https://www.dropbox.com/s/xqp2ru8rnox3yq1/HTML_stunde4_videosample_h264.mp4?raw=1" type="video/mp4" playsinline controls></video>Tip: HEVC und AV1
Will man H.264 und H.265 (und AV1?) anbieten, sind beide Dateien in .mp4 Containern. Dass der Browser, wenn er es abspielen kann, das modernere H.265 verwendet, sollte man auf die komplexere Schreibweise mit <source> Elementen mit Angabe verwendeter Codecs zurückgreifen. So kann der Browser das für ihn passende Format erkennen und auswählen. Das nachfolgende Beispiel von Stackoverflow demonstriert das. Hier kombiniert mit dem Artikel von evilmartians.com:
<video playsinline>
<source src="video_av1.webm" type="video/webm; codecs=av01.0.05M.08,opus" />
<source src="video_h265.mp4" type="video/mp4; codecs=hvc1,mp4a.40.2" />
<source src="video_h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"/>
<a href="video_h264.mp4">Download movie</a>
</video>Die veranschlagte Bearbeitungszeit für diese Aufgabe beträgt 7 Tage, bis zur nächsten Kursstunde.
Die Abgabe dieser Aufgabe ist nicht vorgesehen und dient lediglich deiner eigenen Übung.