Video anhalten

[Sciffler]

Hallo liebe Leute,

ich bin neu hier, habe mich extra angemeldet, weil ich nirgends eine Lösung gefunden habe... Ich hoffe ihr könnt mir helfen.

Ich habe mit html5 eine Miniseite gebastelt, wo kleine Icons angeklickt werden können, bei denen sich dann ein Video oder ein Lied abspielt, die auf dem Server liegen.
Die Implementierung erfolgte ganz simpel über den <video> und <audio> tag in einem Rechteck, welches bei anklicken eines anderen Rechtecks erscheint (innerHTML usw.)
Es ist leider etwas kompliziert, da hier die externe Miniseite in einer Jimdo-Seite aufgerufen werden muss, Mangels Jimdo-Funktionen

Das ganze funktioniert aber soweit wunderbar.
Nun ist es aber auch durchaus möglich, ein nicht fertig abgespieltes Video auszublenden, d.h. es durch klicken auf [X] unsichtbar zu machen.
Da der <video> tag aber nur die browserspezifische Steuerung aufruft, ist es mir nicht gelungen, das Video beim Ausblenden auch anzuhalten oder zu stoppen.

Damit können quasi beliebig viele Videos offen sein und gleichzeitig abspielen.
Die Videos sind dann <invisible>, aber der Ton aller offenen Videos oder auch Audios spielt gleichzeitig noch bis zum Ende des jeweiligen Videos/Audios weiter.
Das blanke Chaos!

Ich möchte also, ein Video anklicken, es soweit es mir gefällt ansehen, wenn ich es schließe, auch wenn ich es nicht selbst anhalte oder pausiere, soll es bis zum nächsten Aufruf gestoppt oder pausiert sein.

Über Ideen zur Lösung dazu wäre ich sehr dankbar!

Chris

 

[Sempervivum]

Nun ist es aber auch durchaus möglich, ein nicht fertig abgespieltes Video auszublenden, d.h. es durch klicken auf [X] unsichtbar zu machen.
Da der <video> tag aber nur die browserspezifische Steuerung aufruft, ist es mir nicht gelungen, das Video beim Ausblenden auch anzuhalten oder zu stoppen.

Dass das Video über die browserspezifische Steuerung gesteuert wird, schließt nicht aus, dass man es gleichzeitig auch durch Javascript steuern und in deinem Fall auch pausieren kann. Ich habe das soeben ausprobiert und es funktioniert:

    <video src="videos/test.mp4" controls></video>
    <button>X</button>
    <script>
        document.querySelector('button').addEventListener('click', event => {
            document.querySelector('video').pause();
        });
    </script>

Da Du viele Videos und Audios hast, musst Du nur die Zuordnung zwischen dem Schließen-Button und dem Video/Audio hin bekommen.

 

[Sciffler]

Danke!

Das war es auch schon... lesen müsste man können - in der DOM Referenz steht das .pause(); ja mit drin.
Ich war so verdruselt, dass ich immer auf stop aus war und allen möglichen Quatsch ausprobiert hatte...