Botão com delay baseado em vídeo no Wix

Fala galera, tudo bem com vocês?

Bom, neste vídeo eu quero trazer um

conteúdo muito pedido lá no canal do

Jonathan Sampaio, que é um grande

parceiro meu aqui, e ele tem falado para

mim que lá no canal dele o pessoal tem

muita dúvida e não sabe como fazer esse

tipo de funcionalidade dentro do site.

Então aqui neste vídeo, vou trazer para

você, né? Um código

extremamente simples, nem se preocupe que

eu vou deixar aqui também. Na descrição,

esse código prontinho para você utilizar

no seu site. Tá bom? Então vamos

lá comigo sem muita enrolação, vou te

mostrar qual é o efeito final que vai

ter. Dentro desse projeto?O

objetivo é fazer com que um botão ele

apareça, né? Dependendo do tempo de um

vídeo, né? Então, depois que o vídeo

decorrer ali, algum tempo específico e a

gente pode colocar o tempo que a gente

quiser, tá? Esse botão vai estar

aparecendo. Bom, então eu tô visualizando

aqui esse projeto publicado, né? A gente

vê ali que tem um vídeo lá no projeto, a

gente pôde ver aqui tem um botão aqui na

parte inferior, né, e vou dar play aqui

no vídeo só pra gente ver o efeito final,

tá? Eu coloquei pra aparecer o botão em

10 segundos né? Só pra ser rápido aqui

pra gente ver, mas a gente pode colocar o

tempo que a gente quiser né então ó 7

segundos, 8 segundos, 9 segundos, 10

segundos e o botão aparece, né? Deu até

um bugzinho ali, mas dá pra gente

corrigir esse bugzinho na visualização,

tá?Essa é a ideia do vídeo, tá? Então,

Bora lá, vamos ver como é que ficou esse

código, que é muito simples. Então, aqui

dentro do editor, para você ter acesso à

parte de código, você vai precisar ativar

o Velo tá? Para ativar o vello, você vem

aqui no menu avançado e clica no botão

aqui ativar modo avançado. Como meu está

ativado, já ele só está escrito,

desativar tá com o vela ativado, você

vai ter essa opção aqui embaixo. Esse

ambiente aqui embaixo para você digitar o

código do seu site, tá e é aqui que a

gente vai fazer todo esse processo para a

gente conseguir criar aquela

funcionalidade. Bom, então vamos lá,

primeira coisa que eu preciso fazer. É

uma função que vai ficar sempre é vendo o

que tempo que está aquele vídeo. Essa

função se chama set interbal. Tá que eu

vou sinalizar para ela, né? Onde um

tempo para que ela fique executando

alguma algum tipo de função várias vezes

tá sem limites ou com algum tipo de

limite que eu colocar?Então vou colocar

aqui, ó 7.

Time out ou 7

intervalor, né? 7 interval

e vou criar aqui uma Aaron function.

Então aqui temos a auron function, que é

uma função normal, né? Uma forma de

executar alguma função e aqui eu vou

colocar vírgula e um tempo que eu quero

para que ela fique sempre executando, ou

seja, tudo o que eu colocar aqui dentro,

né? Dentro desse set interval,

ele vai executar cada um segundos, né?

Porque aqui a gente coloca o tempo em

milésimos, eu não sei se acho que está

muito pequenininho para vocês, vou

aumentar aqui, vou dar um zoom aqui na

tela, vou. Ver beleza

tá? Então acho que ficou melhor agora,

então OK, 7 interval. Tá?

Abro parênteses. Depois abro parênteses

de novo, coloque aqui o igual maior, né?

E depois é as chaves vírgula

1000. Milissegundos, que no caso é um

segundo, então eu estou falando aqui para

ele executar o que estiver aqui dentro a

cada um segundo vou colocar aqui, ó,

console, ponto log, entre aspas,

porque é uma string que eu quero que

apareça. Eu vou colocar para ele exibir

aqui um oi a cada um segundo, né? Que a

gente tiver é depois da gente dar o play

no site. Aí tive visualizando, vou

visualizar aqui, ó, vou esperar um

pouquinho, ele vai executar, ó lá, oi,

oi, oi? A cada um, segundo ele vai

executando isso aí eternamente não vai

parar, tá? Então é essa função que a

gente vai usar para que ele fique, é

verificando sempre em que tempo está esse

vídeo tá e para isso que que eu vou

fazer, eu vou selecionar o vídeo agora,

tá? Para selecionar o vídeo eu vou clicar

aqui em cifrão. E vou

clicar também em w, né? Cifrão w

abro parênteses, e agora eu preciso

colocar aqui dentro como a gente já viu

vários exemplos aqui na listinha que ele

apresenta para a gente, para ficar mais

fácil digitar o código. Eu preciso

colocar aqui dentro OID desse desse

vídeo, mas eu, onde eu encontro esse ID

né? Clicando no vídeo aqui

no Painel lateral de propriedades deixa

eu mudar, eu aqui pro outro lado aqui pra

vocês verem mais fácil aqui no lateral

aqui ó, vai ter a opção aqui ó ID.

Tá, e aí? Eu botei aqui, ó hashtag Video

Player um. Esse é OID do nosso vídeo. A

gente pode mudar esse ID, colocar da

forma que a gente quiser, mas eu não vou

fazer isso agora, tá pra gente ser bem

breve, vou copiar esse ID aqui

e aqui dentro desse é é desses

parênteses. Eu vou colocar aqui aspas

porque precisa ser uma string, né?

Precisa ser um texto, tá? Então eu coloco

aspas, hashtag e coloco aqui O

ID que eu copiei aqui da lateral, deixa

eu voltar aqui para o outro lado, né?

Porque até tampou ali é, é para vocês.

Né? Me desculpe, mas é isso aqui que eu

fiz. É um cifrão?

W. Também está

aqui. Beleza, ó cifrão cifrão w.

Abro parênteses, aspas hashtag

vídeo player um para eu acessar

propriedades, né? Algumas funções que

tenho é que eu posso aproveitar desse

vídeo, desse elemento de vídeo. Eu posso

clicar aqui e digitar ponto. Ele já vai

aparecer tudo o que eu posso usar para

manipular aqui dentro do código é

sua. Coisas sobre esse vídeo, tá? O que a

gente vai usar aqui é a opção corrent

time, onde ela vai me dizer qual é o

tempo atual?Desse vídeo tá?

Então eu vou colocar aqui, ó, vou tirar

esse aqui. Vou colocar um console log. O

console log é o amigo do programador, é o

cara que fala o que está acontecendo ali

no código e às vezes visualmente a gente

não entende muito bem e a gente utiliza

ele para conseguir visualizar o que está

acontecendo. Então vamos lá, o que ele

tem que me passar aqui, ó a cada um

segundo ele precisa me passar. Qual é o

tempo atual que está o vídeo?

Lá no visualizar, né? Do editor, ele

acontece algum bug que ele me informa o

tempo de forma errada, né? Eu Acredito

que por ser um iframe, ele estar pegando

o vídeo lá do YouTube, ele deva ter algum

probleminha dentro do editor, mas quando

a gente vai aqui no próprio site, né,

publicado eu vou te mostrar como você

pode fazer isso para testar aí da mesma

forma que eu tô testando, né? Num site

publicado, você clica botão direito

inspecionar. E aí, aqui na

guia, né? Console é aqui, nessa

menuzinha aqui você vai na guia console,

tá? E ele vai exibir aqui a mesma coisa

que tá exibindo lá No No, no editor. Pra

gente, tá? Eu vou dar aqui um control f

5 só pra vocês verem. Tá que a hora

que nessa inicializar a página aqui ele

vai mostrar aqui que está no tempo zero,

tá? Então ele está exibindo ali, ó, cada

um segundo no tempo zero, vou dar play.

E aí já começou a mudar, está aqui ele

está informando para a gente o tempo em

segundos do nosso vídeo. Então,

ó, 8 segundos está lá informando para a

gente, ó, beleza legal, é isso que a

gente quer. Estava funcionando

corretamente, então vamos lá, vou tirar

esse cara daqui, vou tirar esse console

log. Só pra ter certeza,

né, que que eu vou fazer aqui, esse,

esse, essa verificação, essa função? Após

essa etapa aqui, ela só precisa ser

executada se o vídeo tiver

realmente sendo executado, entendeu? Eu

não preciso ficar verificando o tempo

toda. Vez se o vídeo não está sendo

executado, tá? Então o que é que eu

vou fazer? Eu vou colocar aqui um if, né?

Esse if aqui significa se tá e eu

vou colocar parênteses e eu posso passar

aqui uma condição, né? Novamente eu vou

selecionar, né? Primeiro eu vou colocar

aqui 11 chaves aqui no final. Eu vou

colocar esse é código aqui no final.

Tá colocar aqui o console ponto log?

Pronto, beleza. Esse console

. org com a informação do tempo

atual aqui dentro ele vai informar pra

gente. É somente se caso ele passar

é dessa condição aqui que eu estou

colocando, tá?Então eu

posso colocar aqui, ó, vou selecionar o

vídeo novamente. Vou copiar aqui para

ficar mais fácil. E eu vou usar uma outra

função que eu posso utilizar dentro do

vídeo, tá? Vou clicar aqui em ponto

e vou pegar aqui, ó, essa função aqui, ó

splay essa função, ela vai me

falar se o vídeo está sendo executado ou

não, tá. Se ele estiver sendo

executado, ela vai ser verdadeira. Então,

se for verdadeira ela vai, ele vai

executar o que está aqui em baixo. Se não

ele não vai executar nada, tá? Então vou

colocar, vou clicar aqui, vou publicar de

novo, né, pra gente visualizar no site

publicado. Bom

beleza, agora a gente não consegue ver

nada, ó, não está aparecendo mais o zero

aqui embaixo, né? Pode ser, que

pequenininho para vocês aí, mas acho que

dá para ver, tá? Então eu só vou dar play

aqui e aí? Agora sim, ele vai aparecer

para a gente, tá? Isso economiza aí a

memória, né? O uso do site, né? Deixa a

performance melhor, tá? Então é

importante a gente pensar nesses

detalhezinhos daqui para frente, agora

a gente vai colocar aqui agora, ó.

Vá usar esse corrente time, e eu vou

fazer uma nova condição, tá? Então eu vou

usar novamente o se, né? Então

se. O corrent

time, né? Ou seja, o tempo atual do

vídeo foi foi maior, então

o sinalzinho de maior aqui, que

10, né? Vou colocar aqui entre chaves

aqui na frente ele vai executar alguma

coisa, então se o tempo atual for maior

que 10, ele vai executar qualquer coisa

que eu quiser. Vou dar um console logs só

pra gente ver que está funcionando e

gente tipo assim, né? Você que não tem

muita experiência com o código.

Teste sempre com a cada coisinha que você

vai fazer. Teste, sempre dê o console log

ali. Como é que está? Estão fazendo aqui

na prática, com vocês? De uma forma bem

mais simples. Mesmo assim, para que

vocês entendam como seria programar mesmo

isso aqui, tá EEE de uma visão

assim. Bem bem básica mesmo, tá? Então eu

tô dando console log e todas as vezes

para vocês verem como é testar o

código como é, é experimentar cada

coisa, testar elas, né? Ver o que que

acontece, tá?É justamente por isso que eu

estou fazendo um console login em cada.

Cada uma das etapas. Então vou colocar

aqui, ó play.

Beleza, 234.

8 segundos, 9 segundos, 10 segundos.

Agora marque 10. Ele executou o que está

ali dentro, fechou. Está funcionando

exatamente do jeito que a gente quer

agora. Agora eu preciso colocar uma outra

função aqui, que agora é a função que vai

aparecer o meu botão, né? E no caso do

botão que ele já está aqui embaixo, eu

preciso deixar ele oculto. Inicialmente,

o meu já está oculto, mas para isso o seu

não vai estar, né? Você vai precisar vir

aqui no Painel de propriedades que ele

fica aqui do ladinho. Vai precisar

selecionar essa opção aqui. Ó, oculto, tá

deixar ela ativada?Ou seja, ele vai ficar

opaco aqui também, tá sinalizando pra

gente aqui dentro do editor que esse

elemento aqui está oculto inicialmente.

Para fazer com que esse botão apareça

agora, né? A gente vai selecionar esse

botão?E como eu falei, um

modo de selecionar é com cifrão, W

W, parêntese e digita aqui dentro OID

do botão né? Vou copiar aqui do lado,

vou colocar aqui, entre aspas, hashtag

batom um. E para

isso, né? Eu preciso acessar uma função

que exibe esse elemento na tela, né?

EE da mesma forma que a gente fez com o

corrente time novo vídeo, né? A gente vai

fazer com o botão também, vou digitar

aqui ponto e eu vou procurar aqui uma

função show, né? É que show

mesmo, né? De de de visualizar, né, de

aparecer, então ela está aqui, ó opção

show e Como Ela É uma função e

eu preciso executar-la eu preciso colocar

aqui parênteses às vezes no final e aí

ele vai executar essa função para a

gente. Tá, vamos lá, vamos

agora, né? Que que ele tem que fazer

agora? Quando passar de 10 segundos, ele

precisa executar essa função.

9, 10. Passou,

apareceu o botão legal bom, até

aqui a gente já cumpriu o nosso objetivo.

A gente já está aparecendo. Esse botão é.

Em relação ao tempo do vídeo, tá? Então,

se você quiser parar por aqui, fica à

vontade. Não tem problema nenhum, mas

agora a gente vai deixar essa função é

essa funcionalidade um pouco mais bonita,

um pouco mais apresentado, né? Colocar um

feide ali no botão deixar ele mais legal,

tá? Para isso, a gente vai colocar aqui,

ó, nesse show a gente vai passar como um

parâmetro, tá?

Há uma string chamada feide,

que é a animação que ele vai fazer, tá?

E eu vou colocar é não, não

preciso colocar mais nada, tá só fade

mesmo. Ele já vai fazer essa esse

aparecimento de uma forma mais legal.

E aí a gente já consegue ver aqui o botão

parecendo com feide, né? A gente viu que

ele deu um ali, um ele foi aparecendo,

depois ele voltou e começou a aparecer de

novo. Isso é porque a nossa função ela

está executando a cada um segundo, né? E

quando ele foi aparecer a primeira vez,

ela executou de novo e ele voltou para

trás e quis aparecer novamente, tá?

Então, a gente precisa parar isso, então

o que é que eu faço para parar isso? Tá?

Eu preciso colocar esse set intervo aqui

dentro de uma variável, né? Pra isso a

gente vai se. Essa variável, vou colocar

aqui um LED, né? LED,

eu vou chamar ela de isso aqui. Esse nome

pode ser o que você quiser, tá?Vou

colocar aqui, ó a aparecer botão.

Tá só para você ver que realmente pode

ser qualquer nome. Eu vou colocar aqui

igual a nossa função que a gente criou,

né? O Setin termo tá e

quando ele?Quando ele executar essa

função, eu preciso limpar esse

cara aqui. Ele não vai executar mais

nunca, né? Porque aí a gente também faz

uma otimização ali e não fica executando

um código sempre dentro da nossa página,

né? Isso ajuda pra caramba, tá? Então,

pra que, como é que eu vou fazer isso,

né? Eu tenho uma função que se chama

clear. Clear interbal.

Tá, e a gente vai executar Ela E Eu vou

colocar entre parênteses e vou passar

aqui a nossa variável, tá? Então, o que

ela vai fazer quando a gente executar a

primeira vez o show do botão, né?

Apareceu o botão, ele já vai limpar esse

set entervo aqui porque a gente não vai

ter mais necessidade de utilizálo vou

publicar e aí, beleza? Dei

play, vou avançar aqui para 8 segundos.

9 10 vai aparecer ali, ó,

tranquilamente no nosso botão. Conforme o

tempo do vídeo. E como eu falei pra

vocês, você pode colocar o tempo que você

quiser, tá aquele vídeo nosso tem 50

segundos. Eu vou colocar aqui, por

exemplo, aparecer em 40 segundos.

Atualizei aqui a página, né, pra colocar

40 segundos, é só aumentar aqui. Ó, né?

Então videocplayer com hrent time for

maior que 40, tá? Então

dei play no vídeo aqui. Claro que eu vou

avançar aqui pra frente, se não vai ficar

muito tempo, ó.

37, 3839 e 40 e apar

cee

u o botão beleza

bom, espero muito que você tenha gostado

desse conteúdo. É um conteúdo bem simples

e rápido daqui que eu trouxe para vocês,

com alguns detalhezinhos, para que a

gente deixe a função também bem melhor,

né? Bem mais bonita e apresentável. E

como eu falei, vou estar deixando o

código prontinho aqui na descrição para

vocês copiarem, colarem aí no seu site e

só mudar o uso i d's ali do vídeo do

botão conforme tá aí dentro do seu site,

beleza? Muito obrigado. E até o próximo

vídeo, eu tenho uma notícia muito

importante para te dar. Se você

trabalha com a wixelancer ou tem uma

agência e quer se especializar, quer ter

um conhecimento melhor sobre a plataforma

para desenvolver projetos ainda melhores

ou quer se tornar um freelance da área?

Ser um web design. Criar sites, criar

aplicações web essa notícia é para

você. Eu estou falando aqui da witz pro,

uma plataforma de treinamentos

especializada no universowix. com.

Nela você vai encontrar tudo o que

precisa para se tornar um profissional do

absoluto zero ao avançado, com

diversos vídeos materiais de apoio,

tutoriais completo, webners,

Lives e tudo o que você precisa de saber

sobre este universo. Eu deixei um link

aqui na descrição desse vídeo para você

se cadastrar e garantir o acesso

antecipado. Se cadastrando, você também

irá garantir benefícios exclusivos e

também ficará sabendo em primeira mão

sobre o lançamento oficial da plataforma,

então. Agora mesmo, vack em

descrição, acesse o link wix pronto

expert e se cadastre te vejo lá.