Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Legenda não exibe

Bom dia! Aqui não exibe a legenda no vídeo, o que deu o erro? Segue o html:

Um pouco mais sobre a Apeperia

Rua Vergueiro, 3185 Vila Mariana, São Paulo

(11) 5571-2751 ou contato@apeperia.com

    <video src="img/formacao-java.mp4" class="secaoInstitucional-video"controls>
      <track src="img/legenda-portugues-brasil.vtt" kind="subtitles" srclang="pt-br" label="Português(Brasil)">
    </video>
10 respostas

Oi Lais,

Você está executando o arquivo index.html diretamente no navegador ou rodando pelo servidor localhost (127.0.0.1)?

Pois o browser bloqueia o arquivo de legenda por segurança, veja (executando o arquivo diretamente no navegador):

arquivo vtt sendo bloqueado pelo chrome

Executando por localhost:

arquivo vtt não sendo bloqueado por localhost

Oi Marcos, Tudo bem? Sim diretamente no navegador Firefox, e não sei como posso rodar o servidor localhost? Não sou muito boa nisso. Como posso desbloquear dentro do Firefox pra poder navegar c/ legenda? Obrigada! PS: Não consigo carregar imagem aqui =(

Acredito que o jeito mais fácil de rodar o servidor é pelo VS Code, é bem simples, veja:

  1. Instale o VS Code https://code.visualstudio.com/download
  2. Instale a extensão para rodar o servidor https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
  3. No VS Code, abra a pasta do projeto em Arquivo > Abrir Pasta
  4. E por fim, clique em Go Live na barra de status do editor (o navegador vai abrir automaticamente em localhost)

Go live no vs code

Nossa! Aqui apareceu ferramenta CC (Português-Brasil) na telinha mas não aparece legenda em português, vc sabe o motivo? Vi aqui VSC, a extensão Live Server já está habilitada. O que era problema mesmo? O pior não sei por que aqui não carrega a imagem q dei print

<video src="img/formacao-java.mp4" class="secaoInstitucional-video"controls>

Bom, vamos ver quais os erros aparecem no console do navegador:

  1. Clique com o botão direito do mouse na página e vá em Inspecionar
  2. Vá na aba Console
  3. Vá no vídeo e clique no CC e ative a legenda
  4. Verifique as mensagens de erro na aba Console

Se aparecer algum erro, posta aqui pra gente continuar investigando.

Oi Marcos, O pior aqui não consigo postar imagem pra vc ver aqui =( Segui seu conselho, mensagem aparecendo no console:

Security Error: Content at file:///C:/Users/yasunak/Desktop/Alura/Acessibilidade/index.html may not load data from file:///C:/Users/yasunak/Desktop/Alura/Acessibilidade/img/legenda-portugues-brasil.vtt.

solução!

Vi que ainda não deu certo rodar com um servidor, mas não tem problema, vamos tentar outra solução:

  1. Digite about:config na barra de endereço do Firefox e dê <ENTER>
  2. Pesquise por strict_origin_policy
  3. Dê dois cliques em true para definir como false

habilitar crossorigin no firefox pelo about config

Isso só funciona no Firefox, o Chrome não permite (pelo menos até onde sei) alterar essas configurações.

Assim que terminar seus estudos, lembre-se de voltar as configurações para os valores originais.

Agora deu certooooooooooooo!!!!! Vc é demais!!! Muito obrigada pela paciência viu!!! Abs

Por nada =)

Gosto muito de ajudar pessoas que não desistem na primeira dificuldade.

Bons estudos

<3<3<3