Video mit Klick starten (war:Frage zum Wiki-Artikel „Hilfe:SELFHTML-Boxen“)

[Ernst Wrtal]

Wie kann ich von einer HTML-Seite einen Clip (mp4-Datei) starten und in einer Box laufen lassen? 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.

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. Ich vermute, daß es mit den Elementen "document" und "object" gelöst werden kann.

Vielen Dank für eventuelle Infos und hilfreiche Vorschläge!!!

[edit]: Überschrift geändert. Matthias Scharwies[/edit]

MfG Ernesto

[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

[Gunnar Bittersmann]

@@Matthias Scharwies

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

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

Wenn etwas wirklich weg soll, dann ist das keine Sache des Stylings, sondern darf sich durchaus im DOM widerspiegeln – und ohne CSS funktionieren:

document.getElementById('myVideo').hidden = true;

Einer Klasse finished bedarf es ebensowenig wie einer Regel video.finished { display: none }.

(Höchstens einer [hidden] { display: none } für Uralt-Browser. Dann ist man IIRC auch mit document.getElementById('myVideo').setAttribute('hidden', '') auf der sichereren Seite.)

Oder gleich das Element aus dem DOM nehmen:

var myVideoElement = document.getElementById('myVideo');
myVideoElement.parentNode.removeChild(myVideoElement);

LLAP 🖖

[Matthias Scharwies]

Servus!

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

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.

Ich persönlich würde hier keinen eigenen Button vorsehen. Benutzerfreundlicher ist die Ansicht des Videos selbst, oder einer Vorschauansicht.

Durch das controls-Attribut wird eine Steuerung angezeigt, auf deren Play-Button man klicken kann.

Das versteht jeder besser als ein "Hier geht's zum Video"-Button.

---

Update 6:26: Nach dem ersten Kaffee habe ich noch einmal nachgedacht: Ich würde das Video nicht ausblenden, wie du vorhast. Sonst müsstet du den (von mir nicht empfohlenen) Button wieder einblenden.

Benutzerfreundlicher wäre ein erneuter Klick auf "Play". Lass das Video doch da!

Herzliche Grüße

Matthias Scharwies