Verwendung: Einen Button erstellen, der ein Video im Hintergrund aktiviert

Philipp's Avatar

Philipp

12 Sep, 2018 09:14 AM

Produkt: Oneo Contao
Contao-Version: 3.5

Guten Tag, ich habe Oneo lokal auf meinem wamp_Server installiert. Die Header-Slides (mit dem main_slider) habe ich durch eigene ersetzt. Die Seite soll hinterher so aussehen, dass die slides eine story erzählen und wenn man runterscrollt kommt man auf die about_page (diese habe ich einfach in die Hauptspalte gesetzt).

  1. Wie kann ich erreichen, dass der Wassertropfen (siehe screenshot) ein Video im Hintergrund aktiviert (als play-button dient), woraufhin, das Video einmal abgespielt wird?

Was konkret passieren soll ist, ich klicke auf den Wassertropfen und die Seite läuft mit Wasser voll bzw. das Schiff schwimmt (siehe Video).

Herzlichen Dank für Ihre Hilfe,
Philipp Jörgens

  1. Support Staff 1 Posted by RockSolid Theme... on 12 Sep, 2018 04:29 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Eine solche Funktionalität können Sie mit JavaScript realisieren. Der Code für diesen Anwendungsfall könnte z. B. folgendermaßen aussehen:

    document.querySelector('#ID_DES_TROPFENS').addEventListener('click', function(event) {
        document.querySelector('#ID_DES_VIDEOS').play();
        event.preventDefault();
    });
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • inflow__video.mp4 7.17 MB
  • screenshot_slide4.png 616 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac