O que é o Código de delay para sincronizar elementos da página com o vídeo?

O Código de delay é um script utilizado no Antigo VTurb Player que permite sincronizar a exibição de elementos da página com o tempo exato do vídeo.

Diferente de soluções baseadas apenas em tempo fixo da página, esse script acompanha o progresso real do vídeo. Isso significa que, mesmo que o usuário pause e continue depois, os elementos permanecem sincronizados corretamente.

Além disso, o script cria um sistema de cache inteligente: se o visitante já tiver atingido determinado ponto do vídeo (como o pitch) e retornar à página dentro do período configurado, ele não precisará assistir tudo novamente para visualizar as seções liberadas — o que melhora retenção e conversão.

Se você estiver utilizando o Novo Player, utilize o artigo correspondente.

Se preferir, você pode seguir esse tutorial em VÍDEO:

Clique aqui para assistir.

🔧 Como configurar o Código de delay para sincronizar elementos da página com o vídeo

1. Defina o tempo em que os elementos devem aparecer.

Configure o tempo em segundos dentro do script

No código, localize a variável:

var SECONDS_TO_DISPLAY = 10;

Substitua o número 10 pelo tempo (em segundos) exato em que os elementos devem aparecer.

Para descobrir o tempo correto em segundos:

Multiplique os minutos por 60 e some os segundos restantes.

Exemplo:

Se você quer que os elementos apareçam em 22:47:

22 x 60 = 1320

1320 + 47 = 1367

O número correto a ser utilizado no código será 1367.

2. Adicione a classe “esconder” nos elementos desejados.

Inclua a classe nos elementos que devem aparecer com delay

Você deve adicionar a classe esconder nos elementos que deseja ocultar inicialmente.

Se sua página for em HTML puro, envolva o conteúdo com:

<div class="esconder">
SEÇÃO A SER ESCONDIDA
</div>

3. Insira o script abaixo do embed JS do vídeo.

Cole o código na posição correta

O script deve ser inserido abaixo do embed JS do seu vídeo (não na mesma div — deve ser após a div do vídeo).

Se você utiliza Elementor

a) Cole o script na mesma caixa HTML do vídeo, deixando um espaço entre o embed JS e o script de delay:

b) Adicione a classe esconder no elemento ou seção:

Clique com o botão direito no elemento → Editar elemento → vá até Avançado.

Em Classe CSS, insira:

esconder

Pronto! Seu script já estará funcionando normalmente em seu site.

⚙️ Como funciona na prática

• Os elementos com classe esconder iniciam ocultos.
• O script monitora o tempo real do vídeo.
• Quando o vídeo atinge o tempo definido em SECONDS_TO_DISPLAY, os elementos são exibidos.
• Se o usuário pausar o vídeo, o sincronismo é mantido.
• O sistema cria um cache de 14 dias.
• Se o usuário já tiver atingido o tempo configurado e retornar dentro desse período, os elementos aparecem automaticamente.

⚠️ Pontos importantes

O cache pode fazer parecer que a alteração não funcionou na guia normal. Em janela anônima o comportamento refletirá exatamente o que seu lead verá.

Deixe apenas o vídeo principal em embed JS.

Os demais devem estar em iFrame para evitar conflitos com o script.

Compatibilidade

• Funciona apenas com embed em JS.
• Não funciona corretamente com embed em iFrame.

Código de delay

<style>.esconder { display: none }</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
/* ALTERE O VALOR 10 PARA OS SEGUNDOS EM QUE AS SEÇÕES VÃO APARECER */
    var SECONDS_TO_DISPLAY = 10;
    var CLASS_TO_DISPLAY = ".esconder";
/* DAQUI PARA BAIXO NAO PRECISA ALTERAR */
    var EXPIRATION_DAYS = 14;
    var alreadyDisplayedKey = "alreadyElsDisplayed" + SECONDS_TO_DISPLAY;
    var elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
    var elsDisplayed = false;
    var attempts = 0;

    class StorageHandler {
        static expiryTime = EXPIRATION_DAYS * 86400000;

        static set(key, value) {
            localStorage.setItem(
                key,
                JSON.stringify({ value, expiry: Date.now() + this.expiryTime })
            );
        }

        static get(key) {
            var item = localStorage.getItem(key);
            if (!item) return null;

            var { value, expiry } = JSON.parse(item);
            if (Date.now() > expiry) {
                localStorage.removeItem(key);
                return null;
            }
            return value;
        }
    }

    var alreadyElsDisplayed = StorageHandler.get(alreadyDisplayedKey);

    var showHiddenElements = function () {
        elsDisplayed = true;
        elsHidden.forEach((e) => e.style.display = "block");
        StorageHandler.set(alreadyDisplayedKey, true);
    };

    var startWatchVideoProgress = function () {
        if (typeof smartplayer === 'undefined' || !(smartplayer.instances && smartplayer.instances.length)) {
            if (attempts >= 10) return;
            attempts++;
            return setTimeout(startWatchVideoProgress, 1000);
        }
        smartplayer.instances[0].on('timeupdate', () => {
            if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
            if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY) return;
            showHiddenElements();
        });
    };

    if (alreadyElsDisplayed) {
        setTimeout(showHiddenElements, 100);
    } else {
        startWatchVideoProgress();
    }
});
</script>

Atualizado em: 27/02/2026