Ergebnis 1 bis 3 von 3
  1. #1
    serge2016 ist offline Grünschnabel
    registriert
    02-10-2016
    Beiträge
    2

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

    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.
    Code:
    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

  2. #2
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    210

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

    Bei diesem Codeabschnitt
    Code:
    "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.

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

  3. #3
    serge2016 ist offline Grünschnabel
    registriert
    02-10-2016
    Beiträge
    2

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

    Danke. Werde mal bald testen. Bin noch unterwegs.

Ähnliche Themen

  1. Antworten: 2
    Letzter Beitrag: 18-12-2009, 11:40
  2. Text Anzeigen wenn Maus über Bild
    Von Dog86 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 07-05-2008, 10:52
  3. kein onmousemove event wenn maus über link?
    Von vexator im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-03-2008, 19:35
  4. neues bild wenn man mit der maus über den link hovert
    Von nikeairmax im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 07-09-2004, 21:27
  5. wenn maus über bild, dann anderes bild
    Von ThunderStorm im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 26-09-2002, 09:55

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •