Video Background: guia completo

O Video Background acrescenta secções de destaque com vídeo em ecrã inteiro na página inicial e nas páginas de categoria do PrestaShop 8 e 9. O vídeo é alojado no seu próprio servidor e reproduzido pela etiqueta de vídeo HTML5 nativa: sem chamadas ao YouTube ou ao Vimeo, sem cookies de terceiros e sem nada a acrescentar à sua faixa de consentimento. O módulo integra um carregamento diferido por IntersectionObserver, uma imagem de recurso em telemóvel e uma sobreposição multi-idioma (título, subtítulo, botão).

Instalação

1. No back-office do PrestaShop, abra Módulos > Gestor de módulos e clique em Carregar um módulo.
2. Selecione o ficheiro dfvideobackground.zip e confirme.
3. Clique em Configurar: chega diretamente à lista das secções de vídeo.

Criar a sua primeira secção de vídeo

1. Clique em Adicionar uma secção de vídeo.
2. Preencha um nome interno (nunca apresentado no front-office).
3. Escolha a localização: Página inicial ou Página de categoria. Numa categoria, selecione-a na árvore.
4. Carregue o seu vídeo MP4 (obrigatório) e, se tiver, a variante WebM (servida prioritariamente, por ser mais leve).
5. Acrescente uma imagem de póster (apresentada antes do carregamento do vídeo) e uma imagem de recurso para telemóvel. Sem imagem de telemóvel, é usado o póster.
6. Introduza o título, o subtítulo, a designação e a ligação do botão em cada idioma da loja.
7. Grave: a secção fica em linha de imediato, se estiver ativa.

Preparar um vídeo otimizado

A regra de ouro é uma sequência curta (10 a 20 segundos), sem som, sem faixa áudio e com menos de 5 MB. Com o ffmpeg:

# MP4 H.264, 1280 px de largura, sem áudio, otimizado para streaming
ffmpeg -i origem.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# Variante WebM VP9 (opcional, mais leve)
ffmpeg -i origem.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

Referência das definições

Aspeto

• Altura: valor e unidade (vh ou px). 60 vh por predefinição.
• Cor e opacidade da sobreposição: véu colorido colocado sobre o vídeo, para garantir a legibilidade do texto (preto a 35 % por predefinição).
• Cor do texto e alinhamento do conteúdo (esquerda, centro, direita).

Reprodução

• Reprodução automática: leitura automática, sempre sem som (exigência dos navegadores).
• Repetição: reinicia o vídeo continuamente.
• Mostrar os controlos: apresenta os controlos nativos do leitor (inativo por predefinição, para um efeito de «fundo»).

Desempenho

• Carregamento diferido: o vídeo só é descarregado quando a secção se aproxima do viewport (margem de 200 px). Recomendado.
• Ponto de rutura para telemóvel: abaixo desta largura (768 px por predefinição), a imagem de recurso substitui o vídeo e o ficheiro de vídeo nunca é descarregado.

Comportamento no front-office: carregamento diferido, telemóvel, acessibilidade

• Em computador, as origens de vídeo são injetadas quando a secção se aproxima do viewport e a reprodução começa; faz pausa automaticamente quando a secção sai do ecrã (poupança de bateria e de largura de banda).
• Em telemóvel (abaixo do ponto de rutura), só é apresentada a imagem de recurso: zero bytes de vídeo transferidos, com os seus Core Web Vitals em telemóvel preservados.
• Se o visitante tiver ativado prefers-reduced-motion, o vídeo com reprodução automática não é descarregado: fica a imagem de póster.
• O script de front-office pesa cerca de 4 KB, em JavaScript nativo, sem jQuery.

RGPD

Ao contrário de uma incorporação do YouTube ou do Vimeo, o vídeo é servido a partir do seu próprio domínio: não é depositado qualquer cookie, não é transmitido qualquer dado a terceiros e não é emitido qualquer pedido externo. Não tem, por isso, nada a acrescentar à sua faixa de consentimento nem ao seu registo de atividades de tratamento por causa deste módulo.

Multiloja e multi-idioma

• Cada secção fica associada à loja do contexto em que foi criada; em contexto de loja única, a lista é filtrada automaticamente.
• O título, o subtítulo, a designação do botão, a ligação e o texto alternativo da imagem introduzem-se em cada idioma ativo, diretamente no formulário.

Resolução de problemas

• O vídeo não aparece numa categoria: confirme que o seu tema inclui mesmo o hook displayContentWrapperTop no seu layout (presente em todos os temas baseados no Classic) e que a secção está ativa e associada à categoria certa.
• O vídeo não começa automaticamente: a reprodução automática exige um vídeo sem som, e o módulo impõe essa definição, mas alguns navegadores bloqueiam a reprodução automática em modo de poupança de energia; nesse caso, fica a imagem de póster.
• Erro no carregamento: verifique a extensão (mp4, webm, jpg, png, webp), o limite do PHP upload_max_filesize e as permissões da pasta modules/dfvideobackground/uploads/.
• O vídeo aparece em telemóvel: verifique o valor do ponto de rutura da secção; a imagem de recurso aplica-se apenas abaixo dessa largura.

Desinstalação

A desinstalação elimina as tabelas SQL do módulo, os ficheiros carregados na pasta uploads e o separador de administração. Exporte previamente os seus vídeos se os quiser conservar.