Eine tolle Möglichkeit, einen Slider zu gestalten, bietet sich mit der Nutzung von Videoinhalten im Hintergrund, auch "Motion Background" genannt. Am besten eignen sich hierfür Videos, die sich ohne erkennbaren Übergang wieder und wieder abspielen. Diese Videos sind auch kostenfrei im Netz unter den Stichwörtern "Background Video Loops" oder "Looping Motion Background" zu finden. Meistens handelt es sich dabei um kurze mp4 oder mov Videos, die eine Laufzeit von 10 oder 20 Sekunden haben. Mit Hilfe des HTML5 video -Tags und dem Attribut "loop" kann dieses Video beliebig oft wiederholt werden. Und das kannst Du Dir auch in einem Slider zu nutze machen.

 
1. Vorbereitung

Als erstes benötigst Du ein passendes Video, welches sich wiederholen kann, ohne dass man einen Übergang sieht. Entweder Du produzierst das Video selbst oder googelst mit den oben genannten Stichwörtern danach. Je nach Anwendung sollte das Video eine bestimmte Auflösung aufweisen. Wenn Du den Slider in das Seitenlayout integrierst, reichen zum Beispiel 1280x720 Pixel absolut aus. Planst Du einen Slider über die volle Breite "Full-Width Slider" zu erstellen, kann es auch eine Auflösung von 1920x1080 Pixeln haben. Du solltest auf jeden Fall aber auf die fertige Dateigröße achten. Zu große Videofiles können beim Besucher anfangen zu ruckeln, wenn die Anbindung ans Internet nicht mehr mit macht. Du kannst im video -Tag auch mehrere Videoformate unterbringen, um mehr Endgeräte versorgen zu können.

Hier eine Auflistung, welche Browser welche Videoformate unterstützen

BrowserMP4WebMOgg
Internet ExplorerJaNeinJa
ChromeJaJaJa
FirefoxJaJaJa
SafariJaNeinNein
OperaJa (ab Opera 25)JaJa

Quelle: w3schools.com

Nachdem Du also das Video im passenden Format hast, solltest Du vom ersten Videoframe einen Screenshot in Originalgröße machen. Dieses Bild wird später als Hintergrundbild für den Slide gebraucht. Bis das Video anfängt zu starten, sieht der Besucher das Bild, welches identisch zum Video ist. Lade beide Dateien auf Deinen Server.

 

2. Anlegen des Sliders

Erstelle im LayerSlider Backend Modul nun einen neuen Slider. Du musst die Einstellungen wie folgt anpassen:

Reiter Basic

  • width: Hier kommt die Breite Deines Videos und Deines Bildes des ersten Frame rein (z.B. 1280px)
  • height: Hier kommt die Höhe Deines Videos und Deines Bildes des ersten Frame rein (z.B. 720px)
  • autoStart: Dieser muss aktiv sein
  • autoPlayVideos: Dieser muss aktiviert sein
  • autoPauseSlideshow: Das muss auf "Off" gestellt werden
  • pauseOnHover: Diese Option sollte deaktiviert werden
  • skin: Das kommt auf dein Slider Konzept an. Ich würde mit "fullwidth" beginnen

Die restlichen Reiter und Optionen kannst Du Dir nach Deinen Bedürfnissen entsprechend anpassen.

 

3. Einen Slide erstellen

Erstelle nun einen neuen Slide. Als "Slide Image" hinterlegst Du den Screenshot vom ersten Frame Deines Videos. In den "Basic Options" musst Du soweit keine Änderungen machen.

 

4. Erstelle den ersten Layer

Dieser erste Layer ist das Video, welches abgespielt wird. Erstelle also einen neuen Layer, benenne Ihn zum Beispiel "Background Video" und stelle den den "Content Type" im Reiter "Basic Options" auf "Pure html code" um. Als Layer Content fügst Du den HTML5 Video Tag hinzu, hier ein Beispiel:

 

 

<video width="100%" loop>
    <source src="/pfad/zu/deinem/video.mp4">
</video>

 

Wichtige Attribute sind hier "width=100%" und "loop". Hier eine Übersicht der gültigen Attribute des Video TAG:

AttributeValueDescription
autoplayautoplaySpecifies that the video will start playing as soon as it is ready
controlscontrolsSpecifies that video controls should be displayed (such as a play/pause button etc).
heightpixelsSets the height of the video player
looploopSpecifies that the video will start over again, every time it is finished
mutedmutedSpecifies that the audio output of the video should be muted
posterURLSpecifies an image to be shown while the video is downloading, or until the user hits the play button
preloadauto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page loads
srcURLSpecifies the URL of the video file
widthpixelsSets the width of the video player

 

Quelle: w3schools.com

 

 5. Die wichtigsten Layer-Einstellungen

Für diesen Layer müssen ein paar Einstellungen gemacht werden, damit das ganze funktioniert.

Im Reiter Layer styles

  • Left Position: 0
  • Top Position: 0
  • Element width: 1280 (oder die Breite Deines Videos)

Im Reiter Animation, effects & timings

  • Slide in horizontal: By Pixels, danach Left auf 0
  • Slide in vertical: By Pixels, danach Top auf 0
  • Fade In: Yes
  • Slide out horizontal: By Pixels, danach Left auf 0
  • Slide out vertical: By Pixels, danach Top auf 0
  • Fade Out: Yes
 
6. Weitere Layer erstellen

Du kannst nun auf dem Slide weitere Layer erstellen. Diese kannst Du nach dem bekannten Prinzip anlegen, positionieren und animieren, wie es Deine Bedürfnisse verlangen.

 

Ein paar Tipps zum Schluss

Hier noch ein paar Tipps zum Schluss, worauf Du achten solltest:

  • Mehrere Slides mit je einem Video als Hintergrund sind möglich. Allerdings benötigen die Videos bei jedem Übergang einen kurzen Augenblick um zu starten. Versuche deshalb, alle Videos in eines zu integrieren. Wenn Du mehrere Slides benötigst, kannst Du auch einen Slide erstellen, und die Layer getimt einblenden und wieder ausblenden, um danach die nächsten einzublenden. Mit den Timings kannst Du Dich an der Laufzeit der einzelnen Sequenzen des Videos orientieren. Die Optionen hier wären "Delay" und "showUntil" in den Layer Optionen
  • Wenn auf kleineren Bildschirmen (Smartphone etc.) das Video nicht sichtbar sein soll, kannst Du es mittels media Query per CSS ausblenden
  • Die beste Variante ist es, den Slider durchlaufen zu lassen, und nicht automatisch von vorne beginnen zu lassen. Wenn die Timings nicht genau stimmen, passt das angezeigte Video nicht mehr zum Hintergrundbild. Eine Möglichkeit wäre, ein transparentes Hintergrundbild in der Größe des Videos als Slide Background zu nutzen, und das Attribut "poster" des Videotags für das Bild zu nehmen. Aus Zeitmangel konnte ich das noch nicht testen, würde mich über Feedback aber freuen

Ich hoffe Dir hat mein neues HowTo gefallen. Hinterlasse mir einen Kommentar, wenn Du Fragen hast.

Hier ist noch ein Demo des Sliders für dieses Tutorial.

background images Layer Slider Layerslider motion motion background Responsive Slider Responsive Slider TYPO3 video video background