Script für Abspielen von html5 video wenn die Maus über das Bild kommt.

[serge2016]

Hallo Leute.

Habe eine Seite, wo ich meine eigene Videos als Liste von ca. 20-40 Videos pro Seite darstelle. Zur Zeit verwende ich ein Script, das die Videos sofort abspielt, wenn der Cursor über Vorschaubild kommt. Die Videos sind in mp4 und starten sofort, wenn die Maus kommt. Läuft eigentlich alles gut und super, nur die Geschwindigkeit beim Seitenladen von 40 Vorschauvideos ist nicht gerade optimal.

Jetzt habe ich gesehen, das sehr viele professionelle Seiten eine andere Variante benutzen und zwar laden die nur reine Vorschaubilder in geringer Qualität als jpg und dann erst, wenn die Maus über das Bild kommt, öfnen per Script ein extra Fenster, wo das Video mit Zusatzinfos abgespielt wird.

Nach einer Recherche im Netz habe ich paar Seiten gefunden, wo dies eigenlich einfach erklärt wird. Leider komme ich nicht weiter mit meinem eigenen Script. Egal was ich auch probiert habe.

Das Problem liegt vielleicht daran, das ich meine Videoliste als eine Reihe von DIVs nacheinander erstelle und dann als html string über php ausgebe. Dabei scheint es mit IDs nicht zu gehen.

Hier ein Beispiel, wie ich einzelne Vorschaubilder erstelle. Aus der Datenbank kommt eine Liste mit Video-ID und dann wird per PHP die Liste abgearbeitet und als String weiter zu HTML geleitet.

function videopopup($id){

$code = '
<div class="videopopup">
<img onmouseover="onVideoClick('.$mp4_url.')" src="'.$thumb_url.$id.'.jpg" class="video_pop" alt="'.$id.'">
</div>';

return $code;

Ach ja, ich arbeite mit Drupal7

Wenn die Maus über das Bild kommt, dann passiert nix.

Hier z.B. eine Seite wo ich wenn ich manuell paar Sachen (url) ändere, dann kriege ich den gewünschten Resultat Create a New Pen

Ich bin leider noch sehr unerfahren in Javascript und kann leider noch nicht einmal einfache Scripts selber schreiben.
Ich weiss, das ich im Script ein Fenster öffnen muss, wenn der Cursor über Vorschaubild kommt, aber irgendwie stehe ich zur Zeit auf dem Schlauch.

Kann mir da jemand helfen, wie ich so ein Script ergänzen kann, das auf einer Seite mit 20-40 Vorschaubildern ein kleines Fenster aufgeht und das richtige Video per "html5 video" abgespielt wird?

Ich kriege nicht hin, wie ich die Vorschaubilder weiter an das Script so leite, das es erkannt wird und ein Fenster mit Video abgespielt wird.

Hier paar Beispiele wie es bei den Profis sowas aussieht:
Travel Stockvideos & Filmmaterial - Shutterstock
https://www.pond5.com/stock-video-footage/1/family.html

[andreax]

Bei diesem Codeabschnitt

"onVideoClick('.$mp4_url.')"

muss der url nochmal in Klammern im Html eingetragen werden
so aber stehts im html dann ohne Anführungszeichen daher sollst du die Anführungszeichen de url vorher noch einmal maskieren.
oder besser und übersichtlicher wäre es die Abschnitte auf mehrere Variablen aufzuteilen.

$code = '<div class="videopopup" ><img onmouseover="onVideoClick(\''.$mp4_url.'\')" src="'.$thumb_url.$id.'.jpg"  class="video_pop" alt="'.$id.'" ></div>'; 

[serge2016]

Danke. Werde mal bald testen. Bin noch unterwegs.