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

Legenda não aparece

A legenda não está aparecendo. Eu vejo a opção com a label que coloquei e seleciono, mas nada aparece.

<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>
9 respostas

Boa noite, May!

Testei o seu código e consegui reproduzir normalmente a legenda. Qual navegador você está utilizando? Já testou em outros? Testei no Chrome, Firefox e Opera, está funcionando para mim. :)

Testei no Chrome e Firefox :/

Notei essas mensagens de erro ao inspecionar pelos navegadores. Parece ter relação com o arquivo .vtt, só não consegui decifrar:

Chrome:

Unsafe attempt to index.html:1 load URL file:///C:/Users/Usuario/Desktop/acessibilidade-web-front-end-1-14e5c4ffd5f7f6d767c8a88e88659f5cec5eb253/img/formacao-java.vtt from frame with URL file:///C:/Users/Usuario/Desktop/acessibilidade-web-front-end-1-14e5c4ffd5f7f6d767c8a88e88659f5cec5eb253/index.html. 'file:' URLs are treated as unique security origins.

Firefox:

Security Error: Content at file:///C:/Users/Usuario/Desktop/acessibilidade-web-front-end-1-14e5c4ffd5f7f6d767c8a88e88659f5cec5eb253/index.html may not load data from file:///C:/Users/Usuario/Desktop/acessibilidade-web-front-end-1-14e5c4ffd5f7f6d767c8a88e88659f5cec5eb253/img/formacao-java.vtt.

P.S.: Eu renomeei o arquivo .vtt, colocando "formacao-java.vtt" semelhante ao nome do vídeo "formacao-java.mp4" em uma tentativa desesperada kk Por isso que o nome do arquivo vtt tá diferente (mas alterei no código tbm direitinho, claro). Nem preciso falar que não adiantou né?

May, acabei de perceber uma coisa aqui com esses erros que você enviou.

Quando tentei abrir o index.html direto pelo navegador, realmente a legenda não aparece! Os testes que eu fiz anteriormente foram utilizando a extensão Live Server (que permite criar um servidor HTTP) do Visual Studio Code para carregar o site, e continua funcionando pra mim.

Quer testar essa solução? Aqui tem um tutorial para você.

Espero que dê certo! :)

Ah sim! Pelo live preview que eu tenho aqui apareceu! Obrigada!

Bem, não entendi muito bem porque não funciona do outro modo, mas fiquei satisfeita que funcionou assim e não foi algum erro do meu código aparentemente :)

solução!

Dei uma pesquisada e acredito que se trata de uma política dos próprios navegadores ao carregar arquivos externos file://, por questões de segurança e privacidade. Achei essa explicação.

Entendi. Muito obrigada!

Comigo aconteceu a mesma coisa!

Mesma coisa aqui