Shopify brooklyn - autoplay vimeo video on homepage

Português do Brasil Discussões Tudo sobre a Shopify
1

Hi,

i have (video) section on my brooklyn shopify home page with a vimeo video (link).

I would like the video to autoplay and to play in loop.. Anyone can help

I found the suggestion bellow but it didnt work…

"You can try something like this:

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:
<script>
 window.onload = function() {
var videos = document.querySelectorAll(`video`);

if (!videos) return;

for (var each of videos){
each.play();
}
            }
			
			</script>

"

Thanks,

Tiago

2

Olá @tiagovhp !

Vejo que escreveu em inglês, mas por ter postado a sua questão aqui na comunidade em português estou respondendo em português para também ajudar qualquer outro membro que possa ter a mesma dúvida. Se você não fala português, nos avise e ficaremos felizes em ajudar em inglês :slightly_smiling_face:

You posted in English in our Portuguese Community, so I decided to reply in Portuguese to also help any other member who might have the same question. If you don’t speak Portuguese, please let us know and we will be happy to help you out in English. :slightly_smiling_face:

Pela sua explicação eu entendo que está usando o tema Brooklyn e buscando saber como adicionar um vídeo com a função auto-play e loop na página inicial da sua loja. E no momento, você está adicionando um vídeo do Vimeo por link, certo?

Você teria o arquivo do vídeo para poder adicioná-lo na seção arquivos da loja e incorporá-lo no tema?

Se sim, por estar usando o tema Brooklyn você tem uma outra opção que seria utilizar a seção “HTML Personalizado” e adicionar o vídeo através do código HTML como sugeri nesse outro post aqui. Para saber mais sobre essa seção HTML personalizado do tema Brooklyn confira esse documento aqui.

Acredito que essa opção te ajudará a implementar o que está buscando, mas quero esclarecer que eu não sou especialista em codificação. Portanto, se tiver qualquer dúvida específica sobre html espero que outro membro da comunidade ou um especialista possa ajudá-lo. Após seguir as instruções, nos avise se conseguiu adicionar o vídeo. Até mais!

3

Ola @Paula ,

Muito obrigado pela sua resposta. Já fiz os passos todos que você recomenda. No entanto, acontece algo estranho:

Abrindo o meu site, o video não se reproduz em autoplay. No entanto, seu eu abrir o site em modo de edição (personalizar loja online) ou se for a uma outra pagina qualquer (por exemplo de produto) e voltar à pagina inicial, o video já se reproduz automaticamente… Sabe qual pode ser a razão para isto?

Obrigado,

Tiago

4

Olá @tiagovhp , bacana saber que conseguiu seguir as instruções e adicionar o vídeo. Mas, é realmente estranho não estar funcionando ao acessar a loja virtual, mas estar funcionando no editor de temas (modo de edição).

Como expliquei no post anterior eu não sou especialista em codificação, portanto, se for algum problema com a linha de código implementada eu não saberei explicar o que pode estar acontecendo. Porém, pela sua explicação isso parece ser algo local com o seu dispositivo, navegador ou conexão de internet.

  • Você chegou a fazer outros testes acessando a loja em outro dispositivo ou navegador?
  • Qual é o URL da sua loja? Poderei acessar a sua loja aqui para fazer alguns testes e conferir o comportamento do vídeo.

Faço essas perguntas, pois pode ser algo apenas com o seu cache / navegador. Para identificarmos se é algo com o navegador, eu recomendo seguir os passos usuais de solução de problemas:

1) Faça testes acessando outro navegador e tente também no modo incógnito para verificar se o problema ainda persiste.

2) Após o passo acima, se o vídeo funcionou normalmente em outro navegador, tudo indica que o problema está no navegador que você estava usando. Prossiga com os próximos passos.

  • Certifique se está usando a última versão do navegador - Se for o Google Chrome, veja como atualizar o navegador aqui.> - Verifique as extensões instaladas no navegador e faça um teste para identificar se tem alguma que está interferindo com a reprodução do vídeo. Pode ser que tenha alguma que não é compatível, especialmente bloqueadores de pop-up. Siga esses passos para desativar as extensões, no navegador clique em “…”> Mais ferramentas> Extensões para visualizar as extensões instaladas e desativá-las. Como nesse exemplo.> - Limpar o cache e cookies do navegador.

Se realmente for um problema local, os passos acima resolverão. Aguardo a sua resposta para saber se conseguiu ou não solucionar essa questão. Até mais!

5

Ola @Paula ,

Respondendo as suas perguntas:

1- sim, eu fiz testes em outros dispositivos e navegadores e até em modo de navegação anónimo. Continua sem funcionar.

2- URL da minha loja é www.tfdworld.com ou maresia-pt.myshopify.com

Obrigado

6

Agradeço o retorno @tiagovhp !

Fiz alguns testes e notei que o vídeo reproduz automaticamente e com som na versão desktop, porém, na versão mobile acontece exatamente isso que você informou; só funciona se acessar uma página e voltar à página inicial.

Analisando este post aqui na comunidade em inglês, há vários comentários reportando um comportamento similar: na versão desktop funciona, mas no mobile não. O especialista que forneceu a linha de código, explica que é comum isso acontecer na versão mobile, pois a reprodução automática de vídeos não funciona corretamente especialmente em dispositivos móveis. Por padrão, muitos navegadores/ dispositivos bloqueiam o recurso de reprodução automática de vídeos.

Além disso, ele explica que a reprodução automática não funcionará em dispositivos móveis, a menos que a tag de vídeo tenha estes dois atributos definidos: “muted” e “playsinline”.

“muted” significa que seus vídeos não serão reproduzidos automaticamente, a menos que o áudio esteja mudo.

“playsinline” significa que o vídeo deve ser reproduzido “inline”, ou seja, dentro da área de reprodução do elemento, e não em tela inteira.

Eu vejo que o seu vídeo está com som, portanto, para fazer com que o vídeo seja reproduzido na versão mobile eu recomendaria adicionar o código abaixo que apresenta os atributos indicados:

<video autoplay loop muted playsinline controls style="max-width: 100%; height: auto;">
  <source src="seu_url_vai_aqui" type="video/mp4">
Your browser does not support our video.
</source></video> 

Essas são as informações que eu encontrei e espero que ajude! Se ainda tiver qualquer dúvida sobre os atributos e edição do código, sugiro solicitar ajuda em inglês naquele mesmo tópico, que um especialista ou outro membro da comunidade poderá ajudá-lo com a sua questão.