Video nach Ablauf ausblenden

[Matthias Scharwies]

Servus!

Wie kann ich von einer HTML-Seite einen Clip (mp4-Datei) starten und in einer Box laufen lassen?

Mit Hilfe des video-Elements.

Welche Mittel und Methoden eignen sich am besten? Frames möchte ich nicht benutzen, da sie ja ständig in der Seite zu sehen sind.

Sehr löblich - Frames werden heute gar nicht mehr benutzt.

Ich möchte, daß die Box oder der Behälter, in dem der Clip läuft, nach einem Click auf einen Button mit dem Film eingeblendet wird und nach Ablauf des Films auch wieder gelöscht werden kann.

Das video-Element kannst du mit CSS beliebig formatieren:

video {
	display: block;
	margin: 0 auto;
}

video.finished {
  display: none;
}

und hinterher mit JavaScript auf das Ende (das ended-Event) lauschen:

document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
   // Was nach dem Event passieren soll.
   // am besten Änderung einer Klasse, die dann anderes CSS lädt.
}

Quelle: https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes

Eine Klasse kannst Du am bequemsten mit classList.add hinzufügen:

document.getElementById('myVideo').classList.add('finished');

Damit werden evtl. vorhandene Klassen nicht überschrieben.

Herzliche Grüße

Matthias Scharwies