PS PrestaShop PrestaShop Beginner

Video Background: volledige gids

Installatie en configuratie van zelfgehoste video-herosecties op de homepage en de categorieën: encoding, lazy loading, mobiele terugval, AVG.

Bijgewerkt Moduleversie 1.0.0

Video Background voegt full-screen video-herosecties toe aan de homepage en de categoriepagina’s van PrestaShop 8 en 9. De video wordt op uw eigen server gehost en afgespeeld door de native HTML5-videotag: geen enkele aanroep van YouTube of Vimeo, geen cookies van derden, niets toe te voegen aan uw toestemmingsbanner. De module bevat lazy loading via IntersectionObserver, een terugvalafbeelding op mobiel en een meertalige overlay (titel, ondertitel, knop).

Installatie

  1. Open in de PrestaShop back-office Modules > Modulebeheer en klik op Een module installeren.
  2. Selecteer het bestand dfvideobackground.zip en bevestig.
  3. Klik op Configureren: u komt direct op de lijst met videosecties.

De module installeert zonder enige override van de core of het thema. Ze registreert de hooks displayHome, displayContentWrapperTop en displayHeader, maakt twee SQL-tabellen aan en een map uploads/ die tegen PHP-uitvoering is beschermd.

Uw eerste videosectie aanmaken

  1. Klik op Een videosectie toevoegen.
  2. Vul een interne naam in (nooit op de front getoond).
  3. Kies de locatie: Homepage of Categoriepagina. Selecteer voor een categorie deze in de boomstructuur.
  4. Upload uw MP4-video (verplicht) en, als u die hebt, de WebM-variant (met voorrang geserveerd omdat ze lichter is).
  5. Voeg een posterafbeelding toe (getoond vóór het laden van de video) en een mobiele terugvalafbeelding. Zonder mobiele afbeelding wordt de poster gebruikt.
  6. Voer de titel, de ondertitel, het label en de link van de knop in voor elke taal van de winkel.
  7. Sla op: de sectie is direct online als ze actief is.

U kunt zoveel secties aanmaken als nodig — één per categorie, meerdere op de homepage — en ze via slepen en neerzetten herordenen in de kolom Positie van de lijst.

Een geoptimaliseerde video voorbereiden

De gouden regel: een korte lus (10 tot 20 seconden), stil, zonder audiospoor, van minder dan 5 MB. Met ffmpeg:

# MP4 H.264, 1280px breed, zonder audio, geoptimaliseerd voor streaming
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# WebM VP9-variant (optioneel, lichter)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

De maximale uploadgrootte is standaard 64 MB (configuratie DFVB_MAX_VIDEO_MB) maar blijft beperkt door de PHP-directives upload_max_filesize en post_max_size van uw server.

Referentie van de instellingen

Uiterlijk

  • Hoogte: waarde + eenheid (vh of px). Standaard 60 vh.
  • Kleur en dekking van de overlay: gekleurde laag over de video om de leesbaarheid van de tekst te garanderen (standaard zwart op 35%).
  • Tekstkleur en uitlijning van de inhoud (links / midden / rechts).

Afspelen

  • Autoplay: automatisch afspelen, altijd gedempt (browservereiste).
  • Lus: herstart de video continu.
  • Bedieningselementen tonen: toont de native spelerbediening (standaard uitgeschakeld voor een “background”-weergave).

Prestaties

  • Uitgesteld laden: de video wordt pas gedownload wanneer de sectie de viewport nadert (marge van 200 px). Aanbevolen.
  • Mobiel breekpunt: onder deze breedte (standaard 768 px) vervangt de terugvalafbeelding de video en wordt het videobestand nooit gedownload.

Frontgedrag: lazy loading, mobiel, toegankelijkheid

  • Op desktop worden de videobronnen bij het naderen van de viewport geïnjecteerd en start het afspelen; het pauzeert automatisch wanneer de sectie uit beeld verdwijnt (besparing van batterij en bandbreedte).
  • Op mobiel (onder het breekpunt) wordt alleen de terugvalafbeelding getoond: nul videobytes verstuurd, uw mobiele Core Web Vitals blijven behouden.
  • Heeft de bezoeker prefers-reduced-motion geactiveerd, dan wordt de autoplay-video niet gedownload: de posterafbeelding blijft getoond.
  • Het frontscript weegt ongeveer 4 kB, in vanilla JavaScript, zonder jQuery.

AVG

In tegenstelling tot een YouTube- of Vimeo-embed wordt de video vanaf uw eigen domein geserveerd: er wordt geen enkele cookie geplaatst, geen enkel gegeven aan een derde doorgegeven, geen enkel extern verzoek verstuurd. U hoeft voor deze module dus niets toe te voegen aan uw toestemmingsbanner of aan uw verwerkingsregister.

Multistore en meertalig

  • Elke sectie is gekoppeld aan de winkel van de context waarin ze is aangemaakt; in single-store context wordt de lijst automatisch gefilterd.
  • Titel, ondertitel, knoplabel, link en alternatieve tekst van de afbeelding voert u in voor elke actieve taal, direct in het formulier.

Probleemoplossing

  • De video verschijnt niet op een categorie: controleer of uw thema de hook displayContentWrapperTop in zijn layout bevat (aanwezig in alle op Classic gebaseerde thema’s) en of de sectie actief is en aan de juiste categorie gekoppeld.
  • De video start niet automatisch: autoplay vereist een gedempte video — de module dwingt deze instelling af, maar sommige browsers blokkeren autoplay in energiebesparingsmodus; de posterafbeelding blijft dan getoond.
  • Fout bij het uploaden: controleer de extensie (mp4, webm, jpg, png, webp), de PHP-limiet upload_max_filesize en de rechten van de map modules/dfvideobackground/uploads/.
  • De video verschijnt op mobiel: controleer de breekpuntwaarde van de sectie; de terugvalafbeelding geldt alleen onder deze breedte.

Deïnstallatie

Het deïnstalleren verwijdert de SQL-tabellen van de module, de geüploade bestanden in de map uploads en het beheertabblad. Exporteer vooraf uw video’s als u ze wilt bewaren.

Was deze pagina nuttig?

Loopt u nog vast? Neem contact op met support