Bild wieder anzeigen lassen, wenn man über einem Objekt nicht mehr drüber hovert

query

Neues Mitglied
Moinsen,

ich hab ein Bild, wo wenn ich drüber hovere, ein Video ohne Ton abgespielt wird und wenn ich mit dem Cursor weggehe, das Video auch pausiert wird. Nun möchte ich aber, dass das Bild, das man vor dem Hovern gesehen hat, wieder eingeblendet werden soll und das Video GESTOPPT wird.

Thx :3
 

alinnert

Mitglied
Das kommt denke ich darauf an, wie du es aktuell umgesetzt hast. Also das gleiche nochmal machen, nur umgekehrt? Mehr kann ich dir mit den aktuellen Infos nicht sagen.

Was meinst du mit stoppen? Pausieren und zurückspulen? Ich seh keine Methode hierfür, daher würd ich das in zwei Schritten machen:

Javascript:
videoElement.pause()
videoElement.fastSeek(0)
 

query

Neues Mitglied
@alinnert
Wie könnte denn sowas aussehen? Du kennst das doch bestimmt von P*rnoseiten, dass wenn man drüber hovert, ein Videoausschnitt gezeigt wird und wenn man sich mit dem Cursor entfernt, wieder das Bild erscheint. Aber wie tue ich das Bild wieder rein? Ich habe das Bild nur als poster im video tag bestimmt :/
 

alinnert

Mitglied
Du meinst so wie bei YouTube? 😄 Anyway... ok, ich hab vergessen, dass die Poster haben können. Ich seh in der Dokumentation jetzt keine Funktion, dieses wieder einzublenden. Ich hätte deswegen jetzt das Bild als normales <img> ausgegeben und bei mouseenter das Video eingefügt und bei mouseout das Video wieder entfernt. Oder ein- und ausblenden statt hinzufügen und entfernen.

Hier ein ganz grobes Beispiel für mouseenter

Javascript:
videoPreview.addEventListener('mouseenter', (event) => {
    const target = event.currentTarget
    const video = target.getElementsByClassName('.preview-video')[0]
    
    video.classList.add('visible')
    video.play()
})
Hilft dir das weiter?
 
Oben Unten